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/`: 图片的相对地址
相关推荐
smileNicky20 分钟前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
yume_sibai25 分钟前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs1 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
shmily麻瓜小菜鸡1 小时前
JavaScript / TypeScript 易踩坑知识点 —— 作用域与变量类
开发语言·javascript·typescript
变与不变8061 小时前
JS作用域,作用域链
前端·javascript·es6
计算机学姐1 小时前
基于SpringBoot的高校爱心慈善管理系统
java·vue.js·spring boot·后端·spring·tomcat·mybatis
雪芽蓝域zzs2 小时前
二十一节:进阶:用户列表批量删除功能
前端·javascript·vue.js
研☆香2 小时前
可选链运算符和空值合并运算符的使用
前端·javascript·vue.js
雪芽蓝域zzs2 小时前
第二十七节:进阶:路由权限控制 + 404 / 401 全局异常页面开发
前端·javascript·html
光影少年2 小时前
react navite 简单原生方法双向调用示例
javascript·react native·react.js