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
相关推荐
借个火er几秒前
Qiankun vs Wujie:微前端框架深度对比
前端
小笔学长3 分钟前
事件委托:优化事件处理性能
javascript·性能优化·项目实战·前端开发·事件委托
freeWayWalker3 分钟前
【前端工程化】前端代码规范与静态检查
前端·代码规范
C2X8 分钟前
关于Git Graph展示图的理解
前端·git
昊茜Claire9 分钟前
鸿蒙开发之:性能优化与调试技巧
前端
雲墨款哥10 分钟前
从一行好奇的代码说起:Vue怎么没有React的<StrictMode/>
前端
小肥宅仙女11 分钟前
告别繁琐!React 19 新特性对比:代码量减少 50%,异步状态从此自动管理
前端·react.js
白兰地空瓶19 分钟前
告别 add(1, 2)!通过 JS 柯里化,让你的代码更加优雅
javascript·面试
ohyeah20 分钟前
柯理化(Currying):让函数参数一个一个传递
前端·javascript
CryptoRzz21 分钟前
StockTV API 对接全攻略(股票、期货、IPO)
java·javascript·git·web3·区块链·github