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/`: 图片的相对地址
相关推荐
愛芳芳41 分钟前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
阿虎儿1 小时前
论 JavaScript 的怪异之处
javascript
你别说话了1 小时前
Vue实现高效拖拽效果 vue-Draggable
前端·vue.js
志尊宝1 小时前
Vue3 零基础每日笔记(036):动手封装 useTitle 与 useToggle——最小的组合式函数
vue.js·#vue #前端 #前端开发·#javascript·#vue.js
专业程序开发源1 小时前
springboot旅游推荐系统82074-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·php·课程设计·旅游
晚安日记wanna2 小时前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
gnip2 小时前
uts 插件示例:获取设备电量信息
前端·javascript
six_2 小时前
RiverPlusCOM Web:不用安装的在线串口调试助手
vue.js·程序员
gnip2 小时前
uni-app 原生插件
前端·javascript·uni-app
gnip2 小时前
跨域常用解决方案
前端·javascript