el-image(vue 总)

一 加载静态资源

在第一次使用vue3开发项目时,使用require('图片路径'),结果浏览器报错:

javascript 复制代码
Uncaught (in promise) ReferenceError: require is not defined

因为require是webpack提供的一种加载能力,但是vue3项目时搭配vite的,所以这里应该用vite提供的静态资源载入方法,

官方文档:https://vitejs.cn/guide/assets.html#the-public-directory

将上面的require改为new URL这种格式,页面就可以正常加载静态资源了

javascript 复制代码
<img :src="image" />

const image = new URL('@/static/images/error.svg', import.meta.url).href
相关推荐
掘金安东尼1 分钟前
Astro 十一月更新:新特性与生态亮点(2025)
前端
拉不动的猪2 分钟前
判断dom元素是否在可视区域的常规方式
前端·javascript·面试
Hilaku21 分钟前
如何用隐形字符给公司内部文档加盲水印?(抓内鬼神器🤣)
前端·javascript·面试
guxuehua24 分钟前
Monorepo Beta 版本发布问题排查与解决方案
前端
猫头虎-前端技术25 分钟前
小白也能做AI产品?我用 MateChat 给学生做了一个会“拍照解题 + 分步教学”的AI智能老师
前端·javascript·vue.js·前端框架·ecmascript·devui·matechat
b***666126 分钟前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
栀秋66627 分钟前
ES6+新增语法特性:重塑JavaScript的开发范式
前端·javascript
爱分享的鱼鱼29 分钟前
Vue动态路由详解:从基础到实践
前端
未来之窗软件服务31 分钟前
幽冥大陆(三十七)文件系统路径格式化——东方仙盟筑基期
前端·javascript·文件系统·仙盟创梦ide·东方仙盟
维维酱35 分钟前
Vite 构建中的两个典型问题:代码分割命名与循环依赖
前端