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/`: 图片的相对地址
相关推荐
竹林8187 小时前
Web3表单签名验证:我用 wagmi 和 ethers 给 DApp 加了一个“免密登录”,踩坑记录全在这了
javascript
用户6990304848757 小时前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
雪碧聊技术7 小时前
Tree.js是什么?一文讲透
开发语言·javascript·ecmascript
VidDown7 小时前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
奋斗吧程序媛8 小时前
补充一个小知识点:有关@click.native
前端·vue.js
英勇无比的消炎药8 小时前
一行命令背后:TinyRobot CLI 如何重构 AI 对话接入的效率范式
vue.js·aigc
触底反弹8 小时前
🚀 手把手用 HTML5 Canvas 从零打造飞机大战游戏,代码全开源!
前端·javascript·canvas
DJ斯特拉9 小时前
axios快速使用
开发语言·前端·javascript
智通9 小时前
可取消的异步任务与 AbortController
javascript
Hilaku9 小时前
AI 写代码越快,为什么 Code Review 越不能省?
前端·javascript·程序员