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/`: 图片的相对地址
相关推荐
jserTang几秒前
手撕 Claude Code-4: TodoWrite 与任务系统
前端·javascript·后端
腹黑天蝎座2 分钟前
大屏开发必读:Scale/VW/Rem/流式/断点/混合方案全解析(附完整demo)
前端·javascript
jserTang3 分钟前
手撕 Claude Code-5:Subagent 与 Agent Teams
前端·javascript·后端
于慨31 分钟前
mac安装flutter
javascript·flutter·macos
光影少年1 小时前
前端工程化升级
前端·javascript·react.js·前端框架
Hello--_--World1 小时前
节流 VS 防抖 相关知识点与面试题
前端·javascript
jserTang2 小时前
Claude Code 源码深度解析 - 前言
前端·javascript·后端
hehelm2 小时前
vector模拟实现
前端·javascript·算法
|晴 天|2 小时前
[特殊字符]️ Vue 3项目架构设计:从2200行单文件到24个组件
前端·javascript·vue.js
Ruihong2 小时前
Vue v-html 与 v-text 转 React:VuReact 怎么处理?
vue.js·react.js·面试