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
相关推荐
吠品7 小时前
处理 Python 类继承中那些变来变去的初始化参数
linux·前端·python
云水一下7 小时前
TypeScript 从零基础到精通(七):从配置到全栈项目落地
前端·javascript·typescript
向日的葵0067 小时前
Vue 路由传参的三种方式(三)
vue.js·路由
秋天的一阵风7 小时前
✨ 代码秒跳转、自动补全?全靠 LSP 和 AST!
前端·后端·ai编程
如果超人不会飞7 小时前
TinyVue Checkbox复选框组件使用指南
前端·vue.js
程序员小淞7 小时前
写一个行政区划下拉选组件(异步+搜索)
前端
星栈7 小时前
用 Rust + Makepad 做一个 JSON 查看器:从零到能用的全过程
前端·rust
yijianace7 小时前
Python爬虫实战:分页爬取 + 详情页采集 + CSV存储
前端·爬虫·python
十九画生7 小时前
从同步到异步:重新理解 JavaScript 的执行机制
javascript
想吃火锅10057 小时前
【前端手撕】防抖节流
前端