• 使用字符串拼接,实现动态加载图片: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);
	
	// 还有方法四,五,六……同理
},
切记!
至少要将 @/ 需要拿出来,如果不拿出来,就无法解析成正确的图片地址!

噢耶!

Logo

前往低代码交流专区

更多推荐