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/`: 图片的相对地址
相关推荐
程序员大阳12 小时前
副队长JavaScript教程(48)-异常处理基础
javascript·异常处理·finally·catch·try
志尊宝12 小时前
AI原生前端开发(038):AI辅助的Next.js 15全栈开发
javascript·人工智能·ai-native
jktantan13 小时前
前端也需要事务:Vue Router 乐观更新、回滚与“过期事务”
前端·javascript·vue.js
怕浪猫13 小时前
K3.1 直追 Astra,先补 13%
前端·javascript·面试
天若有情67313 小时前
【前端趣味项目】把防抖玩出新花样!一个带隐藏后门的毫秒级“读秒挑战”
前端·javascript·html·防抖·外挂·趣味demo·读秒挑战
步行cgn13 小时前
JSON.stringify 详解:把 JavaScript 对象变成 JSON 字符串
开发语言·javascript·json
biu_biubiu14 小时前
我开源了 Codebook
前端·vue.js
小李科技15 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
蓝莓味的口香糖16 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
上火的金鱼妹16 小时前
关于多进程sse连接通知的实战
javascript·状态模式·sse