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

以下注释：

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

通常，咱们的一个img标签在html中是这么写的：

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

这种写法只能援用相对路径下的图片。不能应用绝对路径。应用绝对路径的话，这类资源将会间接被拷贝，而不会通过 webpack 的解决。

如果src是变量的话，咱们个别会在data中定一个变量src进行动静绑定。

<img :src="src">//data中定义变量srcdata() {  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中定义变量srcdata() {  return {    src: img   }}

3、应用**require**动静加载

<img :src="src">//data中定义变量srcdata() {  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.jsmodule.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/weiza...

对于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

  • https://cli.vuejs.org/zh/guid...解决动态资源
  • https://segmentfault.com/a/11...
  • https://github.com/vuejs/vue-...

（完）

如果有问题能够帮我指出，感激！

--- End ---

你好，我是前端队长Daotin，专一分享前端与认知。心愿在这里，和你分享我的前端学习和工作教训，记录个人成长。

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