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/`: 图片的相对地址
相关推荐
cyadyx14 小时前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d
汉堡大王952714 小时前
前端工程师 TypeScript 上手指南:一条清晰的从入门到精通路线
前端·javascript·react.js
wear工程师14 小时前
防抖为什么会失效?React 面试里的闭包和定时器
javascript·react.js
浅水壁虎14 小时前
vue基础(第四章 Pinia)
前端·javascript·vue.js
张元清15 小时前
React useEventSource Hook:自带断线重连的 Server-Sent Events (2026)
javascript·react.js
学习星球15 小时前
Vue 3 实战:拆解 RealWorld 项目
前端·vue.js
铁皮饭盒15 小时前
网页端, 6.5MB人脸识别模型, 谷歌框架, 又快又准
前端·javascript·后端
自进化Agent智能体16 小时前
Hermes 工具与工具集——Hermes 的内置能力
javascript
你挚爱的强哥16 小时前
【exportExcel】单纯靠js不用任何其他第三方插件导出xls格式文件
开发语言·javascript·ecmascript
大家的林语冰17 小时前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js