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
相关推荐
初学小白...5 分钟前
HTML知识点
前端·javascript·html
鹏多多7 分钟前
flutter睡眠与冥想数据可视化神器:sleep_stage_chart插件全解析
android·前端·flutter
艾小码17 分钟前
Vue3 脚本革命:<script setup> 让你的代码简洁到飞起!
前端·javascript·vue.js
U***e6324 分钟前
JavaScript在Node.js中的Webpack
javascript·webpack·node.js
IT_陈寒32 分钟前
Python 3.12新特性解析:10个让你代码效率提升30%的实用技巧
前端·人工智能·后端
故厶1 小时前
webpack实战
前端·javascript·webpack
_果果然1 小时前
你真的懂递归吗?没那么复杂,但也没那么简单
前端·javascript
菜泡泡@2 小时前
仓库地图vue-grid-layout
前端·javascript·vue.js
u***u6854 小时前
React环境
前端·react.js·前端框架
X***E4634 小时前
前端数据分析应用
前端·数据挖掘·数据分析