通常我们引用图片时,会直接这样写 <img src="~/assets/images/img1.png" alt="" />
但是这样有一个弊端,如果图片数量巨大的话,很容易出错,造成图片不显示的情况,所以下面用一种遍历数组的方式来解决这个问题。
1、首先,在images.js中定义一个图片数组
img1、img2…为每张图片的名字(这些图片的后缀都是.png)
import common from './common'
export default {
...common,
homePage: {
imgNames: [
'img1',
'img2',
'img3',
'img4',
'img5',
'img6',
]
}
}
2、在index.vue中定义imgMap
imgMap() {
return this.$store.state.lang.homePage.imgNames.reduce(
(target, name) => {
target[name] = require(`~/assets/images/${name}.png`)
return target
},
{}
)
}
3、引用图片
<img :src="imgMap['img1']" alt="" />
<img :src="imgMap['img2']" alt="" />