• 相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，
• 如定制化背景，动态展示头像等。可能也犯过如

一、错误描述

页面直接调用图片资源的方案

<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;
});