zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue中如何动态引入图片

Vue 如何 图片 动态 引入
2023-09-11 14:19:39 时间

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

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]">