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/`: 图片的相对地址
相关推荐
全栈技术负责人18 分钟前
大模型流式输出核心技术:智能 Markdown 渲染引擎方案
前端·javascript·vue.js
雪芽蓝域zzs37 分钟前
第三十四节:用户新增编辑弹窗增加 el‑tree‑select 部门选择器
前端·javascript·vue.js
巴勒个啦1 小时前
如何设计一个高可复用的前端组件库:从API设计到文档自动化
javascript
mONESY1 小时前
一句话是怎么被大模型记住的?——拆解 LangChain.js 消息从诞生到落盘的完整旅程
javascript
mONESY1 小时前
给大模型装上记忆:Agent 的 Memory 模块,从 InMemory 到文件到 Milvus 向量数据库
javascript
橘子星1 小时前
给 Agent 装上有记忆的"脑子"(一):用 LangChain 打通内存记忆、文件持久化与上下文截断
javascript
光影少年1 小时前
从输入URL到页面渲染,React/RN 整体加载流程
前端·javascript·react native·react.js·前端框架
兔子零10241 小时前
我给 Pi Coding Agent 做了一个桌面控制台:Pi-Harness
前端·javascript·后端
橘子星1 小时前
给 Agent 装上有记忆的"脑子"(二):对话太长会撑爆上下文?用"自动总结"给记忆瘦身
javascript
橘子星1 小时前
给 Agent 装上有记忆的"脑子"(三):把对话存进向量库,让 Agent 拥有"长期记忆"
javascript·人工智能