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
相关推荐
i学长的猫15 小时前
# Hermes + Web UI 本地 Docker 部署指南
前端·ui·docker
yanyu-yaya15 小时前
css篇之网格grid 学习
前端·css·学习
MandalaO_O15 小时前
Web 开发:计算机网络知识梳理
前端·网络·计算机网络
lyp90h15 小时前
Claude Code CLI System Prompt 完整分析
java·前端·prompt
wmm_会飞的@鱼15 小时前
FlexSim-基于SLP方法的A汽车企业总装车间布局优化
前端·数据结构·数据库·python·数学建模·汽车
2301_8156453815 小时前
JavaScript 核心
javascript
之歆15 小时前
DAY_23 JavaScript 函数进阶:作用域 · 提升 · 匿名函数 · IIFE · 回调 · 递归 · Object 对象建模(下)
开发语言·javascript·ecmascript
三声三视15 小时前
Electron鸿蒙桌面应用打包部署完全指南(含自动更新)
前端·electron·前端框架·harmonyos·鸿蒙·桌面端
哆哆啦0015 小时前
CSS 选择器优先级计算规则
前端·javascript·css3
千寻girling15 小时前
周日那天参加的力扣周赛... —— 10号
java·javascript·c++·python·算法·leetcode·职场和发展