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/`: 图片的相对地址
相关推荐
xqchen8 分钟前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript
爱丶不疚12 分钟前
写给前端工程师的现代 Python 工程化最佳实践:从 pnpm 到 uv,从 CommonJS 到 src-layout
javascript·python·typescript
Dreams°12339 分钟前
【Java后端+Vue前后端分离:内网正常、公网访问异常|5个高频经典踩坑完整复盘】
java·开发语言·vue.js
小蒜学长1 小时前
基于Springboot+Vue的环保行动志愿者招募系统设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
天道kabuto2 小时前
踩坑复盘:为什么在输入框按个回车,页面就偷偷刷新了?
vue.js
2601_962097482 小时前
JavaScript 异步编程
javascript·ajax·回调函数·异步编程·子线程
吴长建先生2 小时前
Vue.js支付回调页面如何设计才能保障对账准确性?
vue.js
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(18):SceneLayer 场景图层
javascript
leoZ2312 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
七牛开发者3 小时前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent