Vue中不用for循环怎么遍历图片？你值得拥有

通常我们引用图片时，会直接这样写 <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="" />