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
相关推荐
用户059540174469 分钟前
把Agent记忆测试从Mock换到真实Redis,漏测率从30%降到0
前端·css
吃阿茶搽10 分钟前
大模型RAG实战,从被骂不靠谱到成为部门MVP,我的踩坑全记录
vue.js
Surprisec10 分钟前
如何用 TypeScript 写一个最小可运行的 CLI Agent
前端·人工智能·typescript
marskim11 分钟前
零依赖、高性能!从零实现 React 拖拽排序组件(基于 HTML5 Drag and Drop API)
前端
jingling55513 分钟前
从零到一:用 Aholo Viewer 在浏览器里渲染 3D 高斯泼溅小熊
linux·前端·ubuntu·3d
情多多7715 分钟前
基于NetCorePal Cloud Framework的DDD架构管理系统实践
javascript
Good kid.20 分钟前
开源一套 Vue3 多模态 AI 控制台前端:游乐场、工作室与 API 文档页
前端·人工智能·开源
小林ixn21 分钟前
前后端模块化分离实战:从零搭建用户列表展示(HTML+CSS+JS + json-server)
前端·javascript
天才熊猫君21 分钟前
我把一个 bug 发给 ai,ai 直接通过 playwright mcp 直接排查出 bug。。
前端·javascript
meilindehuzi_a30 分钟前
打破0基础:通过 5 个核心案例深度拆解 JavaScript 正则表达式与运行时类型系统
开发语言·javascript·正则表达式