VueCli动态加载图片踩坑，如何使用require(变量)动态获取图片

之前加载静态图片的时候是这么写的

反斜杠的方式，在动态加载图片的时候依然这么写，但是始终加载不出图片，把变量名换乘常量又好了，奇怪了一整天，始终没弄出来，原来是路径的写法问题，动态加载图片的时候需要在路径中加上@符号的方式

• 使用字符串拼接，实现动态加载图片：require("@/" + src)

看个简单例子就懂了

在template里引用方法getImgUrl()：

<div v-for="(item, index) in dataImg" :key="index">
	<img :src="getImgUrl(item.src)"/>
</div>

• 在method里实现，不使用字符串拼接：

getImgUrl() {
    // src的值是你绝对路径下图片的地址
	return require("@/assets/comic/吾猫当仙.jpg")
}

• 在method里实现，使用字符串拼接，有多种方式：

// 一个函数只能一个return，为了方便看，就不注释了

getImgUrl(src) {
    // src的值是你绝对路径下图片的地址,此地址需省略开头的 @/ 
    
    // 方法一：此处的src是：assets/comic/吾猫当仙.jpg
    return require("@/" + src);	
    
    // 方法二：此处的src是：comic/吾猫当仙.jpg
    return require("@/assets/" + src);	
    
    // 方法三：此处的src是：吾猫当仙.jpg
    return require("@/assets/comic/" + src);
	
	// 还有方法四，五，六……同理
},

切记！

至少要将 @/ 需要拿出来，如果不拿出来，就无法解析成正确的图片地址！

噢耶！