大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。

以下正文:

今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章。

通常,我们的一个img标签在html中是这么写的:

<img src="../images/demo.png">

这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理。

如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定。

<img :src="src">

//data中定义变量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

然而这时候,会发现这个时候图片并没有被加载出来,图片没有显示出来,通过查看发现这张图片的地址显示 ../images/demo.png ,也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理,只会做简单的文本替换。

那怎么办呢?

解决方法

1、将图片转**base64**格式

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

一般图片比较小的可以这么做,比如图标icon等,大小一般在10KB以内的。

2、使用**import**引入图片

<img :src="src">

//使用import引入
import img from '../images/demo.png' //data中定义变量src
data() {
  return {
    src: img 
  }
}

3、使用**require**动态加载

<img :src="src">

//data中定义变量src
data() {
  return {
    src: require('../images/demo.png')
  }
}

4、引入**publicPath**并且将其拼接在路径中,实现引入路径的动态变动

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/demo.jpg" alt="">
<script>
export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },
}
</script>

vue.config.js中配置publicPath路径:

//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

结论

静态资源可以通过两种方式进行处理:

  • 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

  • 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。

原理

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。

在其编译过程中,所有诸如 <img src="...">background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖

绝对路径引入时,路径读取的是public文件夹中的资源,任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。

当你的应用被部署在一个域名的根路径上时,比如http://www.abc.com/,此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀,publicPath 是部署应用包时的基本 URL,需要在 vue.config.js 中进行配置。

扩展

关于vue file-loader vs url-loader

如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

原文链接:https://www.cnblogs.com/weizaiyes/p/7461967.html

关于background url引入图片时

按照上面理论,如果我采用相对路径的方式引入图片的话,webpack会对其require处理。

background: url('./iphonexs.png') 0 0 no-repeat;

实际上确实如此,我看到页面的背景变成:

background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;

这是根据url-loader的配置处理的结果。

或者采用动态style的方式:

<div 
  :style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}">
</div>

Reference

(完)

如果有问题可以帮我指出,感谢!

--- End ---

你好,我是前端队长Daotin,专注分享前端与认知。希望在这里,和你分享我的前端学习和工作经验,记录个人成长。

想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。

vue如何动态加载本地图片的更多相关文章

  1. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  2. Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子

    Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...

  3. android ImageLoader加载本地图片的工具类

    import android.widget.ImageView; import com.nostra13.universalimageloader.core.ImageLoader; /** * 异步 ...

  4. UIWebView如何加载本地图片

    UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...

  5. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  6. Flutter学习笔记(19)--加载本地图片

    如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...

  7. !!!myeclipse 上加载本地图片问题,无法加载问题

    出现无法加载本地图片的问题, 原因就是把图片放到了本地项目中的image了,但是myeclipse上没有刷新 这样以后 本地的图片比在线的要快 低级错误,诶!

  8. 关于Unity3D中Resources动态加载NGUI图片的方法

    在NGUI中有些图片我需要动态进行变更或者加载,怎么办? 首先在项目中创建一个Resources目录,接着把需要的图片放在这里面,可以有子文件夹么?当然可以,文件结构很重要哦~ NGUI加载图片的方法 ...

  9. QTreeWidget实现动态加载本地文件系统

    QT之前没有接触过,之所以做这个也是被临时拉去GoldenFarm组去做渲染的客户端:还别说,虽说是第一次,做出来的这个东西倒是挺让我满意的.先说一下具体需求,然后再上图吧: 渲染时在选择场景文件时, ...

  10. 用UIWebView加载本地图片和gif图

    加载gif图: NSData *gif = [NSData dataWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@" ...

随机推荐

  1. linux常用命令(1)cd命令

    1 命令格式:cd [目录名]2 命令功能切换当前目录至dirName3 常用范例3.1 进入系统根目录cd /3.2 进入上级目录cd ..   或者 cd ..//3.3 进入当前用户主目录当前用 ...

  2. 【风马一族_windom】 批量修改相同文件类型的后缀

    难题:有时因为某种原因,修改一堆文件的类型,重复操作次数多,浪费时间也跟着多,收获也会相当少. 提问:对于软件而言,可量化的,有规律的操作,可以使用程序来进行替代. 特性:在微软操作系统上,不同后缀的 ...

  3. spring学习笔记之spring框架本质

    Spring框架的本质是,开发者在Spring配置文件中使用XML元素进行配置,实际驱动Spring执行相应的代码: 使用<bean.../>元素,实际启动Spring执行无参或有参构造函 ...

  4. .net对文件的操作之对文件目录的操作

    .NET 提供一个静态File类用于文件的操作,下面列出它的主要操作方法. 返回值类型 方法名称 说明 bool Exists(string path) 用于检查指定文件是否存在 void Copy( ...

  5. js/jQuery实现复制到剪贴板功能,兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

  6. mpi和cuda混合编程的正确编译

    针对大数据的计算,很多程序通过搭建mpi集群进行加速,并取得了很好的效果.算法内部的加速,当前的并行化趋势是利用GPU显卡进行算法加速.针对并行性非常好的算法,GPU加速效果将远大于集群带来的加速效果 ...

  7. 网络通信 --&gt; Linux 五种IO模型

    Linux 五种IO模型 聊聊Linux 五种IO模型

  8. [matlab] 1.拟合

    x = [1 2 3 4 5 6 7 8 9 ]; y = [9 7 6 3 -1 2 5 7 20]; p=polyfit(x,y,3); %数字代表拟合函数的阶数 xi=0:0.01:10; yi ...

  9. 初试GH-OST(转)

    最近老板让做一个gh-ost和pt-osc 的对比测试,本文将对两者做对比. 一.原理和所用说明   PT-OSC GH-OST 原理 1.创建一个和要执行 alter 操作的表一样的新的空表结构(是 ...

  10. Java基础-数据类型应用案例展示

    Java基础-数据类型应用案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.把long数据转换成字节数组,把字节数组数据转换成long. /* @author :yinz ...