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/`: 图片的相对地址
相关推荐
竹林8181 小时前
RainbowKit快速集成多链钱包连接,我如何从“连不上”到“丝滑切换”
前端·javascript
No8g攻城狮1 小时前
【前端】Vue 中 const、var、let 的区别
前端·javascript·vue.js
fishmemory7sec2 小时前
Vue大屏自适应容器组件:v-scale-screen
前端·javascript·vue.js
饺子不吃醋2 小时前
Promise原理、手写与 async、await
前端·javascript
前端那点事2 小时前
Vue3+TS 中 this 指向机制全解析(实战避坑版)
vue.js
糯米团子7493 小时前
react速通-3
javascript·react.js·前端框架
心连欣3 小时前
从静态页面到动态交互:DOM操作的核心API解析
前端·javascript·api
橙某人3 小时前
SSR页面上的按钮点不了?Nuxt 懒加载水合揭秘💧
前端·vue.js·nuxt.js
零瓶水Herwt3 小时前
Javascript常用设计模式
javascript
风骏时光牛马4 小时前
C Shell脚本编程与系统管理技术实践指南
javascript