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
相关推荐
晚安日记wanna7 分钟前
SSR 为什么不适合登录态从水合冲突到缓存串号
前端·react.js·面试
aixingpan9 分钟前
aixingpan.cn API开发文档:api_docs_bichart_natalvssolararc2接口指南
前端·php
无限压榨切图仔13 分钟前
一个优惠券需求改了三端,我才明白全栈不是多学一门语言
前端·后端
晚安日记wanna17 分钟前
批量请求失败只弹一个 Toast面试官想听五层
前端·面试·架构
晚安日记wanna24 分钟前
TS const 类型参数一道面试题的四层追问
前端·面试·typescript
用户9210802628627 分钟前
前端 Vue 专栏 09:Vue Router 与前端路由
前端
無限進步D1 小时前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
码士集团小青1 小时前
从落地到“半停用“:qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思
前端
the局外人2 小时前
掌控自己的 K 线数据:TradingView 本地部署与数据源接入
前端·vue.js·websocket
deli0072 小时前
配色对比度检查器:一眼看清文字和背景谁看不清
前端