vue-动态加载图片

背景

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

核心

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

代码

1.采用绝对路径

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

2.采用相对路径

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