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/`: 图片的相对地址
相关推荐
岁岁种桃花儿5 分钟前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js
晓得迷路了9 分钟前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js
雪芽蓝域zzs9 分钟前
第四十四节:封装通用表格多选、批量操作组合式函数
前端·javascript·vue.js
ljt27249606619 分钟前
Vue笔记--路由
javascript·vue.js·笔记
CoderYanger30 分钟前
Java EE 进阶:2.3 JavaScript 综合案例
java·前端·javascript·css·职场和发展·java-ee·html
摸鱼仙人~43 分钟前
Vue 核心知识体系(大厂秋招方向)
前端·javascript·vue.js
ljt27249606611 小时前
Vue笔记--状态管理
前端·vue.js·笔记
mldong1 小时前
Node 开发者也有自己的轻量工作流引擎了:npm i 一行,5 分钟跑通一条审批流
javascript·后端·typescript
Larru-Sun1 小时前
Nginx + Vue Router 基础:SPA History 部署、反向代理与请求分流
运维·vue.js·nginx
多加点辣也没关系10 小时前
JavaScript|第31章:表单与控件
开发语言·javascript·ecmascript