- 相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，
- 如定制化背景，动态展示头像等。可能也犯过如
一、错误描述
页面直接调用图片资源的方案
<img src="../../static/images/web_bg.png" />
改写成变量形式，于是如下编写
<template>
<img :src="imgSrc" />
</template>
<script>
export default {
data() {
return {
imgSrc: '../../images/web_bg.png'
}
}
}
</script>
二、运行图片加载失败原因
Vue中动态引入图片要require的原因是什么？
2.1、什么是静态资源和动态资源
站在一个vue项目的角度，我们可以简单的理解为：
静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。比如assets目录下面的图片，视频，音频，字体文件，css样式表等。
2.2、 为什么动态添加的src会被当做的静态的资源？
因为动态添加src没有进行编译，被webpack当做静态资源处理了，而被编译过后的静态路径无法正确的引入资源
三、解决办法
3.1、 使用网络上的图片资源
data() {
return {
imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
}
}
3.2、使用import导入本地资源
import imgSrc from '../../images/web_bg.png'
export default {
data() {
return {
imgSrc: imgSrc
}
}
}
3.3、 使用 require 导入
data() {
return {
imgSrc: require('../../images/web_bg.png')
}
}
四、动态引入图片require()详解
- webpack本身是一个预编译路径 不能require纯变量的打包工具，无法预测未知变量路径
- require(path) ,path 至少要有三部分组成, 目录,文件名和后缀
- 目录：webpack 才知道从哪里开始查找
- 后缀 文件后缀，必须要加上，不然会报错
- 文件名：可用变量表示
4.1、错误引用
上述意思即是不能通过以下这种方式加载图片，这种方式下，webpack找不到具体是哪个模块（图片）被引入，故而无法将图片hash并输出到dist文件下。
let imgUrlStr = '../images/a.png';
let imgUrl = require(imgUrlStr);
4.2、正确引用
鉴于require在纯变量的情况下找不到模块，所以我们至少要在require参数中写明一个目录，这样的话，虽然不知道具体的模块，但是webpack也会为我们做些分析工作：
分析目录： '../images'
提取正则表达式 : '/^.*.png$/'
let imgName = 'a';
let imgAllName = 'a.png';
// example 1
let imgUrl = require('../images/a.png'); // 纯字符串
// example 2
let imgUrl = require('../images/' + imgAllName); // 目录 + 文件全名
// example 3
let imgUrl = require('../images/' + imgName + '.png'); // 目录 + 文件名 + 后缀
4.3、常用场景
<template>
<div>
<div v-for="(item, index) in imgNameList" :key="index">
<img :src="handleSrc(item.name)" alt="item.name" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgNameList: [
{ name: "imgName1" },
{ name: "imgName2" },
{ name: "imgName3" },
{ name: "imgName4" },
],
};
},
methods: {
handleSrc(imgName) {
return require("@/assets/img/" + imgName + ".png");
},
},
};
</script>
五、动态引入图片import()详解
require是运行时加载模块，但import命令会被javascript引擎静态分析，先于模块内其他模块执行，做不到运行时加载，因此为了实现类似于require的动态加载，就提出了实现一个import()函数方法
import(specifier);
上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，也会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。
import() 特性依赖于内置的 Promise。如果想在低版本浏览器使用 import()，
记得使用像 es6-promise 或者 promise-polyfill 这样 polyfill 库，来预先填充(shim) Promise 环境。
// example
let imgUrl = '';
// 与require参数类似，不能通过纯参数的方式引入模块。正确的引入方式可查看以上require的引入方式
import('../assets/tree/tree.png').then(res => {
imgUrl = res;
});
