vue3项目img标签动态设置src,提示:ReferenceError: require is not defined

1、 问题:

vue3项目中, 动态设置img标签的src属性

js 复制代码
<img class="svg" :src="require(`@/assets/imgs/${imgUrl}`)" />

报错:ReferenceError: require is not defined

2、 解决

js 复制代码
<img class="svg" :src='getImgUrl()' />

//js
  let imgUrl = ref('****.png') //动态图片名称
  const getImgUrl = () => {
    const str = imgUrl.value;
    return new URL(`./../imgs/` + str, import.meta.url).href
  }
  //`./../imgs/`: 图片的相对地址
相关推荐
Linux_cy8 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变8069 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
এ慕ོ冬℘゜15 小时前
ES Promise.all/ Promise.race
前端·javascript·elasticsearch
只睡四小时16 小时前
端侧推理:face-api.js 首屏 92% 是白下载的
开发语言·javascript·人脸识别·ecmascript·tensorflow.js·face-api.js·端侧推理
用户831348593069817 小时前
Vue3 v-for:常用用法与开发高频坑点
前端·javascript·vue.js
Funlang17 小时前
fun-ui 开源:把浏览器界面接回来
前端·javascript
2603_9658966217 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
忆挽篱笙歌18 小时前
进程替换函数与shenll命令行解释器
前端·javascript·算法
小冯不疯18 小时前
688 / 拼多多 / 淘特三类供货链路:从采购单到应付凭证的 4 段对账
javascript
moshuying18 小时前
DeppInfer系列之 - 矩阵、注意力与 GPU:拆解 DeepGEMM 与 FlashMLA
前端·javascript·面试