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
相关推荐
梦65013 分钟前
Vue 实现动态路由
前端·javascript·vue.js
姜糖编程日记15 分钟前
C++——初识(2)
开发语言·前端·c++
丶乘风破浪丶22 分钟前
Vue项目中判断相同请求的实现方案:从原理到实战
前端·javascript·vue.js
why技术22 分钟前
如果让我站在科技从业者的角度去回看 2025 年,让我选一个词出来形容它,我会选择“vibe coding”这个词。
前端·后端·程序员
worxfr24 分钟前
CSS Flexbox 布局完全指南
前端·css
0思必得024 分钟前
[Web自动化] JS基础语法与数据类型
前端·javascript·自动化·html·web自动化
xiaohe060125 分钟前
📦 Uni ECharts 是如何使用定制 echarts 的?一篇文章轻松掌握!
vue.js·uni-app·echarts
Hy行者勇哥26 分钟前
JavaScript性能优化实战:从入门到精通
开发语言·javascript·性能优化
Dreamcatcher_AC31 分钟前
前端面试高频问题解析
前端·css·html
Irene199135 分钟前
JavaScript 常见算法复杂度总结(大O表示法)
javascript·算法