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/`: 图片的相对地址
相关推荐
We་ct11 分钟前
前端包管理工具与Monorepo全面解析
前端·javascript·npm·pnpm·yarn·monorepo·包管理
Ruihong13 分钟前
Vue 3 defineOptions 宏,用 VuReact 编译成 React 长什么样?
vue.js·react.js·面试
花归去18 分钟前
在 Vue 项目中配置 postcss-preset-env
vue.js·webpack·postcss
油丶酸萝卜别吃26 分钟前
高效处理数组差异:JS中新增、删除、交集的最优解(Set实现)
开发语言·前端·javascript
LIO28 分钟前
Vue3 + TS 企业级工程化项目全套实战(Vue3 + Vite + Pinia + VueRouter + Element Plus)
前端·vue.js
gskyi28 分钟前
时间格式化神器:智能显示相对时间
开发语言·javascript·ecmascript
挖稀泥的工人36 分钟前
AI 打字跟随优化
前端·javascript·vue.js
Ruihong37 分钟前
你的 Vue 3 defineEmits(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
jiayong2338 分钟前
第 11 课:把筛选条件同步到 URL
开发语言·前端·javascript
Mintopia42 分钟前
一次讲清"慢"的本质:CPU、IO、网络到底谁在拖后腿
javascript