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/`: 图片的相对地址
相关推荐
是立不是利1 小时前
大文件导致请求被拒的连锁反应
开发语言·前端·javascript
志尊宝1 小时前
Vue3 零基础每日笔记(026):emit 子传父——defineEmits 与事件校验
前端·javascript·html·vue3
ssshooter2 小时前
Node.js 天生就是异步的,为什么还要消息队列?
javascript·后端·面试
mONESY3 小时前
从 RAG 到 Agentic RAG:固定流程的五个毛病,和把它拆成一张图
javascript
梦帮科技3 小时前
从 Guest 到 Platinum:Prompt 配额、API Key 与访问控制的安全闭环
javascript·git·架构·node.js·reactjs·html5·visual studio
linux_cfan3 小时前
videojs v10 源代码系列解读:10 · `DestroyMixin`:双重 rAF 延迟销毁
前端·javascript·音视频
雪芽蓝域zzs4 小时前
第四十六节:顶部【驾驶舱】独立大屏页面实现
前端·javascript·vue.js
右耳朵猫AI4 小时前
Node.js周刊2026W37 | 三处进程崩溃修复、fs 内置 glob、Workers 模块注册表、Vitest 5.0
javascript·后端·node.js
摸鱼仙人~4 小时前
Vue 应用完整启动链路
前端·vue.js·软件工程
右耳朵猫AI4 小时前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js