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/`: 图片的相对地址
相关推荐
局外人LZ8 分钟前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
xkxnq13 分钟前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js
哈__17 分钟前
React Native 鸿蒙跨平台开发:Keyboard 键盘控制
javascript·react native·react.js
lili-felicity17 分钟前
React Native 鸿蒙跨平台开发:TextInput 数据键盘实现与最大文字长度限制
javascript·react native·react.js·harmonyos
光影少年18 分钟前
electron通信方式有哪些?
前端·javascript·electron
meichaoWen26 分钟前
【nodejs】nodejs的一些基础知识
开发语言·前端·javascript
@Autowire27 分钟前
Grid-grid-template-areas 属性
前端·javascript·css
刘一说28 分钟前
腾讯位置服务JavaScript API GL地图组件库深度解析:Vue生态中的地理空间可视化利器
javascript·vue.js·信息可视化·webgl·webgis
*才华有限公司*29 分钟前
#从401到200:Spring Boot + Vue 静态资源访问全链路问题解决方案
vue.js·spring boot·后端