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 小时前
Excel: xls与xlsx格式转换排坑指南
java·前端·excel
程序员黑豆2 小时前
鸿蒙应用开发之跨组件传参:@Provide 与 @Consume 跨层级数据同步详解
前端·harmonyos
0_Error_2 小时前
猫国建设者 修改资源 自动采集
javascript
贩卖黄昏的熊3 小时前
NestJS简明教程——异常处理和日志
javascript·node.js·nest.js
C++、Java和Python的菜鸟3 小时前
第9章 后端Web进阶(AOP)
java·开发语言·前端
我星期八休息4 小时前
扩展— TCP 全连接队列与 tcpdump 抓包
linux·服务器·开发语言·前端·网络·tcp/ip·tcpdump
AC赳赳老秦5 小时前
CSDN 技术社区数据采集:OpenClaw 抓取公开技术热帖,生成领域技术热点周报
java·大数据·前端·数据库·python·php·openclaw
结网的兔子5 小时前
【前端开发】Web端迁移至 uni-app 及鸿蒙扩展方案对比
前端·uni-app·harmonyos
黄泉路醉s5 小时前
在Vant+Vue+TypeScript的H移动前端使用UnoCSS
前端·vue.js·typescript
水瓶夜之5 小时前
.NET 中的新增功能系列文章——.NET SDK中的新增功能
前端·chrome·.net