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/`: 图片的相对地址
相关推荐
ljs64827395110 分钟前
智慧商城(Smart Mall):基于 Spring Boot + Vue 3 的现代化电商平台实战
linux·vue.js·spring boot·后端
张元清28 分钟前
React useLocalStorage Hook:SSR 安全的持久化状态(2026)
javascript·react.js
甜味弥漫32 分钟前
React Router:从单页应用到前端路由
javascript·node.js
lkshop35 分钟前
Next.js 网站 SEO 优化:从 SSR、Sitemap 到结构化数据
开发语言·javascript·ecmascript
析数塔37 分钟前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
程序员Agions39 分钟前
ES2026,早该这样了
前端·javascript
weedsfly41 分钟前
纯函数与副作用——前端开发中最容易被忽视的质量保证
前端·javascript·面试
就叫飞六吧1 小时前
F12 控制台日志移植到页面案例
javascript·css·html
在书中成长1 小时前
HarmonyOS 小游戏《对战五子棋》开发第17篇 - AI的两种评估策略
android·java·javascript
甜味弥漫1 小时前
后端开发入门:业务能力、数据库与程序员的核心竞争力
javascript·node.js·全栈