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/`: 图片的相对地址
相关推荐
前端之虎陈随易44 分钟前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
kyriewen1 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
铁皮饭盒2 小时前
用 Bun.cron 定时 7 月 7 日,为啥? 看图1
javascript
格子软件3 小时前
2026年GEO贴牌代理:分布式多级分账状态机源码深度解构
java·vue.js·分布式·vue·geo
之歆4 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
丹宇码农8 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
GuWenyue9 小时前
提示词彻底过时?一套上下文工程方案,3步让LLM落地生产,代码直接复用
前端·javascript·人工智能
奶油mm9 小时前
公司技术债堆积如山,我一人之力用 Vue3 偷换了整个前端架构
前端·vue.js
用户938515635079 小时前
深入理解 JavaScript 中的 this 与数据存储的奥秘
前端·javascript
Tian_Hang9 小时前
eclipse ditto 学习笔记
运维·服务器·开发语言·javascript·3d