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/`: 图片的相对地址
相关推荐
Funlang5 小时前
给机器写的 JavaScript 造个笼子
开发语言·javascript·ecmascript
古茗前端团队5 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen5 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
啾咪orJIUMI8 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing038 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
无懈可击9 小时前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕9 小时前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
vipxieliang10 小时前
JavaScript 迭代器与生成器:控制异步与惰性求值
前端·javascript
Hilaku10 小时前
Event Loop 这篇你看完就不用再看别的了!
前端·javascript·程序员
晓得迷路了11 小时前
栗子前端技术周刊第 153 期 - Vitest 5.1、Remix v3.2、Node.js 27 Alpha...
前端·javascript·vite