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
相关推荐
李少兄10 分钟前
JavaScript 运算符完全指南
java·开发语言·javascript
志尊宝13 分钟前
Vue3 零基础每日笔记(010):watchEffect——用到谁就自动听谁的“懒人侦听器“
前端·vue.js·笔记
狗哥哥18 分钟前
从“看对方向”到“做出行动”:投资决策卡
前端
拖孩23 分钟前
一个人 + AI 做的小程序,一个月赚了 36 块
前端·后端·微信小程序
weixin_4407305031 分钟前
playwright实战-渠道应用操作
开发语言·前端·python
lhldsg39 分钟前
从零构建智慧场馆解决方案小程序:开发全流程实战
java·前端·小程序
IMPYLH1 小时前
HTML 的 <rp> 元素
前端·javascript·html
晴天161 小时前
npm install -f(--force)深度解析:作用原理、报错根源与风险避坑指南
前端·npm·node.js
IT_陈寒1 小时前
React的状态更新竟然不是同步的?!坑了我一整天
前端·人工智能·后端
科里 Coralyx1 小时前
CoT Toolformer ReAct:工具调用、推理链与 Agent 的起源
前端·react.js·前端框架