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 分钟前
React 鼠标追踪与交互效果实战
前端·javascript·面试
kyriewen21 分钟前
你的JS代码总在半夜崩溃?TypeScript来“上保险”了
前端·javascript·typescript
iReachers39 分钟前
HTML打包EXE配置管理教程:多项目打包设置一键保存、加载与切换
java·前端·javascript
whuhewei1 小时前
js事件循环
前端·javascript
xiaofan11061 小时前
Pretext:无 DOM 的多行文本测量与排版库
前端·javascript
cch89181 小时前
Vue-Element-Admin快速上手指南
前端·javascript·vue.js
xinzheng新政2 小时前
Javascript·深入学习基础知识2
开发语言·javascript·学习
之歆2 小时前
Composition API 深度解析 - 重新理解 Vue 的组件化编程
前端·javascript·vue.js
Cxiaomu2 小时前
React Native 双端一体工程,如何实现分端运行与分端打包?
javascript·react native·react.js
斌味代码3 小时前
React 开发者学 Vue3:Composition API 核心用法对照与避坑实录
javascript·vue.js·react.js