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
相关推荐
Penge6665 小时前
《Go 后端开发者学 TypeScript:数组和元组》
javascript
Penge6665 小时前
《Go 后端开发者学 TypeScript:export关键字大全》
javascript
Penge6665 小时前
《Go 后端开发者学 TypeScript:从零理解 async、await 与 Promise》
javascript
Penge6666 小时前
typescript 中const用法
javascript
Csvn6 小时前
Monorepo
前端
Csvn6 小时前
流水线
前端
Csvn6 小时前
微前端架构
前端
Linux-lucky8 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
风骏时光牛马10 小时前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端
IT_陈寒10 小时前
Redis雪崩把我坑惨了,这是5年经验的教训
前端·人工智能·后端