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 分钟前
类型判断什么时候用 typeof?
javascript
幸运小圣27 分钟前
JavaScript 关键字与保留字学习笔记详细讲解,一篇get ✅【JavaScript查缺补漏】
javascript·笔记·学习
独立开发之道2 小时前
Three.js 创建 VR 内容:四步把一个普通 3D 场景送进头显
javascript·3d·vr
Coodor3 小时前
在前端如何转换IC卡卡号格式
前端·javascript·nfc·卡号格式
百慕大三角3 小时前
给 SPA 加页面切换动画:View Transitions API 从入门到实战
前端·javascript
Hilaku3 小时前
Bun 真的能取代 Node.js 吗?
前端·javascript·程序员
木公子4 小时前
Vue3源码精读04:Scheduler 调度器深度解析|异步批量更新与任务队列源码全解
前端·vue.js
开开心心就好4 小时前
手机悬屏翻译工具外语游戏漫画APP全覆盖
android·前端·javascript·python·游戏·pdf·html
光影少年5 小时前
react navite封装一个RN 通用按钮组件
前端·javascript·react native·react.js·前端框架
独立开发之道5 小时前
【three.js教程】Three.js 矩阵变换:position/quaternion/scale 和 matrix 到底怎么配合
开发语言·javascript·矩阵