vue 项目中 img 标签使用 require 动态获取图片展示

做图片渲染模块时,可能涉及到需要循环渲染的问题,这个时候需要使用require,具体就看下面?????
动态获取图片地址,路径被加载器解析为字符串,图片找不到
这里放图片

vue 项目中 img 标签使用 require 动态获取图片展示_第1张图片
这里在motheds 中定义了个方法获取
vue 项目中 img 标签使用 require 动态获取图片展示_第2张图片
这样就可以了。。。。。

注意

  • webpack 本身是一个预编译的打包工具,无法预测未知变量路径 不能require纯变量路径;
  • require(path) ,path 至少要有三部分组成, 目录+文件名+后缀;
  • 动态获取文件名时候,文件名和后缀最好一起,不然有时候会报错;
// 比如这样
const currentName = index
        ? 'platform-icon' + (index + 1) + 'png'
        : 'platform-icon.png';
      return require('@/assets/images/industry/' + currentName);
// 不要这样,这样本地是没有任何问题的,但是打包上线会报错
const currentName = index
        ? 'platform-icon' + (index + 1)
        : 'platform-icon';
      return require('@/assets/images/industry/' + currentName + 'png');

你可能感兴趣的:(vue.js,vue.js,javascript,前端)