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

博客主要围绕图片渲染模块展开,提到做该模块时可能遇到循环渲染问题,需使用require。还指出动态获取图片地址时,路径被加载器解析为字符串会导致图片找不到,可在methods中定义方法获取来解决。

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

在这里插入图片描述
这里在motheds 中定义了个方法获取
在这里插入图片描述
这样就可以了。。。。。

注意

  • 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');
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余人于RenYu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值