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/`: 图片的相对地址
相关推荐
এ慕ོ冬℘゜15 小时前
使用 jQuery 动态渲染表格与状态切换
前端·javascript·jquery
智购科技自动售货机厂家16 小时前
2026自动售货机AI视觉识别优化:从YOLOv11n模型量化到RKNN部署的端侧推理工程实践~YH
javascript·人工智能·yolo·机器学习·计算机视觉·目标跟踪·perl
晓说前端16 小时前
TypeScript 核心语法应用 —— Vue 3 中的使用(下)
前端·javascript·typescript·类型系统
lancyu19 小时前
# Agent Loop:AI Agent 的唯一直心骨
开发语言·javascript·人工智能
半个落月20 小时前
JavaScript 单例模式详解:从唯一实例到按钮事件
javascript
weixin_BYSJ198721 小时前
springboot智慧公共交通系统---附源码51123
java·javascript·spring boot·python·django·flask·php
sir.山21 小时前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
你别说话了1 天前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.1 天前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫1 天前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript