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
相关推荐
不可能片场15 分钟前
Electron 退化成 node:一个环境变量的锅
前端·electron
楚楚河河16 分钟前
js 变量声明
前端
Cicada12824 分钟前
Web 服务器怎么选
运维·服务器·前端
不可能片场26 分钟前
接口返回 200 不代表活着:catch-all 路由的陷阱
前端·electron
farerboy31 分钟前
编程技巧:VUE 实现接口返回数据的流式处理
javascript·vue.js
天道kabuto31 分钟前
前端每日知识点:React 与 Vue Diff 算法对比 · 完整总结
vue.js·react.js·前端框架
用户9210802628631 分钟前
Cookie 和 Token,到底谁在负责登录态
前端
阳火锅33 分钟前
2025,记住这一年!它是古法编程的最后一年。
前端·javascript·面试
sibylyue34 分钟前
【报表和BI大屏】ECharts数据可视化大屏 / 驾驶舱
前端·信息可视化·echarts
用户9210802628640 分钟前
为什么 Header 是 HTTP 的灵魂
前端