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源码解析-第一部分:宏观架构
前端·react.js·源码
我是大卫11 分钟前
React源码解析-第二部分:更新与调度
前端·react.js·源码
狸礼li15 分钟前
web网站设计作品--第二大脑
前端
2603_9552797026 分钟前
C++23新特性在CLion中的实战体验
前端·javascript·c++23
梨子同志28 分钟前
HTTP
前端
kidding72339 分钟前
旋转大转盘小程序
前端·css·微信小程序·小程序·前端框架
道友可好40 分钟前
Claude Code 泄露源码里的 89 个秘密
前端·人工智能·后端
Tian_Hang1 小时前
Eclipse Ditto 的权限策略
java·服务器·前端·网络·ide·ubuntu·eclipse
叩码以求索1 小时前
经典算法实例分析:写字符串需要的行数
开发语言·javascript·ecmascript
lichenyang4531 小时前
从 0 新增一个 `has.echo`:我如何理解小程序容器里的 API 调用链路
前端