vue中如何动态引入图片

以下是直接读取某一文件夹下的图片,感觉挺好用,记录以下。

methods: {
    // 动态引入图标
    loadMenuImgs() {
      let routeImgs = require.context("@/assets/icon/menu", false, /\.png$/);
      console.error(routeImgs);
      routeImgs.keys().forEach(item => {
        console.error("item", item);
        import("@/assets/icon/menu" + item.replace(".", "")).then(base64 => {
          let reg = /\.\/(.+)\.png/;
          let filename = reg.exec(item)[1];
          this.$set(this.routeImgs, filename, base64);
        });
      });
    },
}

 

使用:

<img :src="routeImgs[list.itemName]">

 

 

 

 

 

 

posted @ 2020-07-28 18:58  古墩古墩  Views(2363)  Comments(0Edit  收藏  举报