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/`: 图片的相对地址
相关推荐
还是大剑师兰特2 分钟前
Vue3 按钮切换示例(启动 / 关闭互斥显示)
开发语言·javascript·vue.js
小金鱼Y5 分钟前
从进程线程到 async/await,一文吃透前端异步核心原理
前端·javascript
SuperEugene6 分钟前
前端代码注释规范:Vue 实战避坑,让 3 年后的自己还能看懂代码|项目规范篇
前端·javascript·vue.js
进击的尘埃19 分钟前
用声明式 YAML Schema 驱动 LLM 做 `Code Review` 自动化
javascript
kyriewen30 分钟前
JavaScript 数据类型全家福:谁是大哥大,谁是小透明?
前端·javascript·ecmascript 6
凉辰43 分钟前
uniapp实现生成海报功能 (开箱即用)
javascript·vue.js·小程序·uni-app
OpenTiny社区1 小时前
TinyRobot Skills技巧大公开:让 AI 成为你的 “UI 搭建”副驾驶
前端·vue.js·ai编程
Moment1 小时前
2026年,TypeScript还值不值得学 ❓❓❓
前端·javascript·面试
乌拉那拉丹1 小时前
vue3 配置跨域 (vite.config.ts中配置)
前端·vue.js