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 分钟前
⚛️ React 19 组件化实战 —— 从零搭建 Todo List 并吃透组件通信
前端·人工智能·react.js
bonechips9 分钟前
React 组件通信:一套 TodoList 讲清 props 与回调
前端·react.js
渣波11 分钟前
别把 TodoList 写成面条代码!一文吃透 React 组件通信与状态驱动的核心内功
前端
2601_9647028911 分钟前
Claude Opus 5 API 开发实战:对话、文本生成与结构化输出
java·服务器·前端
cellurw21 分钟前
20260724 六组件编译收尾与全局构建验证
前端
寒水馨25 分钟前
Windows下载、安装electron-v43.2.0(附安装包electron-v43.2.0-win32-x64.zip)
javascript·windows·typescript·electron·跨平台·桌面应用·chromium
用户29307509766933 分钟前
用React 完成Todos 的 组件应用:深入理解单向数据流与组件通信
前端
玉宇夕落1 小时前
React 父子组件通信 Todo List 看透单向数据流与不可变数据
前端
软件开发技术深度爱好者1 小时前
国际音标魔法实验室工具HTML5实现
前端·html5·英语学习