动态改变静态资源路径
动态改变静态资源路径
正常使用如img标签时静态资源是固定的,无法进行改变或者在变量中定义赋值
如我们想实现如下需求,在for循环中动态改变src的图片明,达到改变的目的
//错误用法
<img v-for="i in 10" :src="`@/images/image-${i}.jpg`)" :key="i">
//图片无法找到
//图片在未赋值时已被引入渲染,渲染后才进行赋值,当然会提示找不到图片,那么如何解决呢?
首先我们要明白vue的编译处理方法,明白原理才能更好的解决问题
<img src="../image.png">
//上面的代码片段将会被编译为:
createElement('img', {
attrs: {
src: require('../image.png') // 现在这是一个模块的请求了
}
})
那么我们是否可以在src过程中直接把图片作为模块引入,引入时改变变量名,而非编译时再作为模块引入?
//成功渲染
<v-img v-for="i in 10" :src="require(`@/images/image-${i}.jpg`)" :key="i">
单枪匹马你别怕,一腔孤勇又如何,这一路你可以哭,但不能怂!
—— Here are lovecode3000 ~