VueCli动态加载图片踩坑,如何使用require(变量)动态获取图片
之前加载静态图片的时候是这么写的反斜杠的方式,在动态加载图片的时候依然这么写,但是始终加载不出图片,把变量名换乘常量又好了,奇怪了一整天,始终没弄出来,原来是路径的写法问题,动态加载图片的时候需要在路径中加上@符号的方式使用字符串拼接,实现动态加载图片:require("@/" + src)看个简单例子就懂了在template里引用方法getImgUrl():<div v-for="(ite
·
之前加载静态图片的时候是这么写的
反斜杠的方式,在动态加载图片的时候依然这么写,但是始终加载不出图片,把变量名换乘常量又好了,奇怪了一整天,始终没弄出来,原来是路径的写法问题,动态加载图片的时候需要在路径中加上@符号的方式
- 使用字符串拼接,实现动态加载图片: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);
// 还有方法四,五,六……同理
},
至少要将 @/ 需要拿出来,如果不拿出来,就无法解析成正确的图片地址!
噢耶!
更多推荐
已为社区贡献3条内容
所有评论(0)