动态改变静态资源路径

动态改变静态资源路径

正常使用如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">