页面直接调用图片资源的方案
改写成变量形式，于是如下编写
export default { data() { return {imgSrc: '../../images/web_bg.png' } }}二、运行图片加载失败原因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 1let imgUrl = require('../images/a.png');// 纯字符串// example 2let imgUrl = require('../images/' + imgAllName);// 目录 + 文件全名// example 3let imgUrl = require('../images/' + imgName + '.png'); // 目录 + 文件名 + 后缀4.3、常用场景 export default { data() {return { imgNameList: [{ name: "imgName1" },{ name: "imgName2" },{ name: "imgName3" },{ name: "imgName4" }, ],}; }, methods: {handleSrc(imgName) { return require("@/assets/img/" + imgName + ".png");}, },};五、动态引入图片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 环境。// examplelet imgUrl = '';// 与require参数类似，不能通过纯参数的方式引入模块。正确的引入方式可查看以上require的引入方式import('../assets/tree/tree.png').then(res => {imgUrl = res;});