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/`: 图片的相对地址
相关推荐
兔子零10242 分钟前
架构师最危险的能力:用正确的技术,做出错误的架构决策
前端·javascript·后端
Bug收容所23 分钟前
Vue+js Day2
前端·javascript·vue.js
掘金酱1 小时前
带着作品来,坐下来聊|掘金 X-lab · Coffee Talk 邀请你来见一面
前端·javascript·后端
honkun62 小时前
vue 下拉树组件 vxe-table-select 实现分页多选
前端·javascript·vue.js
大熊程序猿3 小时前
用 ASP.NET Core + SignalR 做一个带实时对战房间的打字练习平台
javascript
OpsEye3 小时前
大量无效 Token 消耗,是很多企业被忽略的隐形成本
javascript·ai编程
溪语流沙4 小时前
【Web全栈进阶】监控与告警:线上系统的“体检报告”
前端·vue.js·python·fastapi
鬼手点金4 小时前
单轮对话:最简单的 API 调用
java·服务器·前端·javascript·react.js·servlet·tomcat
罗丹丹Luna5 小时前
JavaScript计算任务峰值并发:同一时刻先结束还是先开始
javascript
古夕5 小时前
同样的 font-weight,为什么这个项目的字体就是更细?
前端·javascript