vue批量动态设置img的src路径

315 阅读1分钟

在VUE中动态切换 img的src是无法生效的;因为VUE会把你写的路径当作 字符串,下面是一个借助require.context的解决方案

使用

<img :src="getIco('图标名称')" width="60" alt="" />

引入文件

require.context

// 引用静态图标
const files = require.context(
  "../../assets/img",
  false,//是否还搜索其子目录
  /\.png$/
);

方法

    /**
     * 处理静态图片地址
     * @param {string} icoName 图标名称
     * */
    getIco(icoName) {
      return files("./" + icoName + ".png");//上下文件类型要一致不然会找不到
    }