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
相关推荐
广州华水科技2 小时前
当大坝面临风险时,如何有效实施单北斗GNSS变形监测?
前端
学以智用3 小时前
wangEditor V5 精简完整参考手册
javascript
AiMan3 小时前
Poe还是不可以导出左侧所有对话,只能单条内容导出,方法不对吗
前端
用户298698530143 小时前
React 前端实现 Excel 与 CSV 互转:基于 WebAssembly 的浏览器端方案
javascript·react.js·excel
AiMan4 小时前
文心生成的内容能否下载吗?
前端
前端双越老师4 小时前
程序员 1v1 访谈系列第十四期:接受焦虑 拥抱不确定
前端·ai编程·全栈
deli0075 小时前
MCP 协议 6 条消息拆开看:AI 为什么能自己读文件调接口
前端
风骏时光牛马5 小时前
请告诉我标题对应的内容、想要的风格,我马上给你生成。
前端