非你网

使用本地图片，本来是可以直接使用的。可，如果是动态的话，常规的方式是不行了。比如，根据某个数据，动态的渲染本地的图片直接来就不行。那终究是有方法的。

操作一波

假如我们的图片存放在 src/assets/image/icons/ 下，有很多张，都是以 png 图片。

常规的使用。

<div>
    <img src="@/assets/image/icons/love.png" alt="love" />
</div>

这样就可以了。可如果是下边这样的情形呢。

<template>
  <div class="container">
    <div v-for="(item, index) in list" :key="index">
      <img :src="item.src" :alt="item.name"/>
    </div>
  </div>
</template>

<script>
//  此刻，src 对应的就是 /src/assets/image/icons/  下的图片
export default {
  data() {
    return {
      list: [
        {
          name: "爱",
          src: "love"
        },
        {
          name: "花儿",
          src: "flower"
        },
        {
          name: "猫儿",
          src: "cat"
        }
      ]
    };
  }
};
</script>

如果在 template 中这样用也是不行的。

<img :src="`@/assets/image/icons/${item.src}.png`" :alt="item.name"/>

那么，怎么用呢。这样弄哈。

<template>
  <div class="container">
    <div v-for="(item, index) in list" :key="index">
      <img :src="transImg(item.src)" :alt="item.name"/>
    </div>
  </div>
</template>

<script>
//  此刻，src 对应的就是 /src/assets/image/icon/  下的图片
export default {
  data() {
    return {
      list: [
        {
          name: "爱",
          src: "love"
        },
        {
          name: "花儿",
          src: "flower"
        },
        {
          name: "猫儿",
          src: "cat"
        }
      ],
      imgs: {}
    };
  },
  mounted() {
      this.initImgs()
  },
  methods: {
    transImg(value) {
        return this.imgs[value]
    },
    initImgs() {
      let imgs = require.context("@/assets/image/icons", false, /\.png$/);
      imgs.keys().forEach(item => {
        import("@/assets/image/icons" + item.replace(".", "")).then(base64 => {
          let reg = /\.\/(.+)\.png/;
          let filename = reg.exec(item)[1];
          this.$set(this.imgs, filename, base64);
        });
      });
    },
  }
};
</script>