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/`: 图片的相对地址
相关推荐
前端Hardy4 小时前
前端开发效率翻倍:15个超级实用的工具函数,直接复制进项目(建议收藏)
前端·javascript·面试
前端Hardy4 小时前
Vue 项目必备:10 个高频实用自定义指令,直接复制即用(Vue2 / Vue3 通用)
前端·javascript·vue.js
h_jQuery4 小时前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
懒大王95274 小时前
Vue 2 与 Vue 3 的区别
前端·javascript·vue.js
xuankuxiaoyao4 小时前
vue.js 实践--侦听器和样式绑定
前端·javascript·vue.js
AIBox3654 小时前
openclaw api 配置教程,支持 Claude、Gemini、GPT5.4 等模型
javascript·人工智能·gpt
Rattenking4 小时前
uni-app组件开发----自定义数字键盘组件
前端·javascript·uni-app
小沐°5 小时前
vue3+element-plus 实现动态菜单和动态路由的渲染
前端·javascript·vue.js
蓝黑20205 小时前
Vue导入和注册组件
前端·javascript·vue
ct9785 小时前
Vue3 状态管理方案:Pinia 全指南
javascript·vue.js