1.背景

今天有个需求是从后台查询出图片的相对路径，然后遍历写入到网页结构中实现图片的动态展示。

2.核心

1.相对路径和绝对路径、根目录

<img src="../img/logo.png" />，其中../img/logo.png便是**相对路径**
<img src="/img/logo.png" />，其中/img/logo.png便是**绝对路径**，注意以/开头变为绝对路径
根目录： **src为根目录**

2.vue页面加载图片的原理

<img src="../img/logo.png" />
当图片的src使用 **相对路径**时，webpack会自动介入将上面代码编译为
<img src="require('../img/logo.png')">
通过**require**便将图片作为模块引入进来，在页面进行显示。

webpack解析路径规则参考：
https://www.cnblogs.com/yeminglong/p/12734819.html

3.require使用及注意事项

在前端，模块的引入默认是不支持全动态引入的（即：require(变量)），支持半动态引入（即：require(静态路径+动态变量路径)）

错误引入模块

this.goodslist = this.goodslist.map(item=>{
	// require种直接使用变量，虽然变量值的路径是正确的，但是模块引入不支持：require(变量)，所以会报错`Cannot find module '../assets/logo.png'`
	item.imgurl = require(item.imgurl);
	return item;
})

正确引入模块

this.goodslist = this.goodslist.map(item=>{
	item.imgurl = require('../img'+item.imgurl.replace('../img',''))
	return item;
})

Webpack 在处理动态名称模块名的时候，对于半动态会直接将能识别的静态路径和该静态路径下的所有子文件都作为模块处理，如： require(’…/img’+imgName) ，能识别到 …/img 目录，并将该目录下所有文件当做模块处理，做成一个Map映射以便后面进行匹配，所以能识别到对应的文件，其原理是调用require.context(directory,useSubdirectories,regExp)方法 ，方法返回一个函数（假设为fn），返回的函数传入图片路径（如：./goods1.png）便可得到处理过的图片对应路径（如：fn(’./goods1.png’)，）

方法参数解释如下：
directory {String} -读取文件的路径（一般为一个目录）
useSubdirectories {Boolean} -是否遍历文件的子目录，默认false
regExp {RegExp} -匹配文件的正则，默认匹配所有文件

//上面的代码等效于
this.goodslist = this.goodslist.map(item=>{
	const fn = require.context('../img',false,/^\./);
	const file = item.replace('../img','.')
	item.imgurl = fn(file);
	return item;
})

4.webpack不介入处理的情况

1.图片的src为绝对路径时，webpack不会介入处理。针对这种情况图片必须放在这种情况在根目录同级的public文件夹中，这也是显示图片最简单的一种方式，这种方式webpack不会介入，所以最终显示效果与引入时的代码一致。

3.代码

1.采用绝对路径

<img :src="systemLogo" class="user-avator" alt />
图片需要放在public目录下

2.采用相对路径

<img :src="require('../../assets/img/'+systemLogo)" class="user-avator" alt />
其中：systemLogo为变量
图片放在assets目录下