记录---前端图像五兄弟：网络 URL、Base64、Blob、ArrayBuffer、本地路径，全整明白！

范晓军

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

你有没有在写前端的时候，突然迷糊了：

• 为啥这张图片能直接 src="https://xxx.jpg" 就能展示？
• 为啥有时候图片是乱七八糟的一串 Base64？
• 有的还整出来个 Blob，看不懂但好像很高级？
• 有时还来个 ArrayBuffer，这又是哪位大哥？
• 最离谱的是：我本地图片路径写进去，怎么就不生效？

这些，其实都和“图像在前端的存在形式”有关。今天咱们就像唠家常一样，一口气整明白这几个常见的前端图像形式，用最接地气的方式讲明白，配上实例、场景分析，帮你彻底建立系统认知！

一、网络 URL：最熟悉的那张脸

<img src="https://example.com/image.jpg" />

这就是我们最常见的方式：网络地址。

📦 本质上是啥？
一个 HTTP(S) 请求，浏览器去服务器上拉图片回来。

👍 优点：

• 用起来最简单，能连网就能显示
• 浏览器会缓存，提高加载效率
• 图片不占你的 HTML 或 JS 文件大小

👎 缺点：

• 依赖网络，断网就 GG
• 跨域可能出问题（特别是 canvas 想处理图片时）
• 没法离线用

🧩 常见场景：

• 图床、CDN 图片
• 用户头像、商品封面等动态内容

---

二、本地 URL（相对路径）：常被坑的老兄

<img src="./images/logo.png" />

听起来像本地文件，实际上也是被打包进项目的资源文件路径。

⚙️ 本质上是啥？
开发时是相对路径，生产环境通常会被 Webpack、Vite 等构建工具“处理成”一个真实可访问的路径，比如 dist/assets/logo.abcd1234.png。

👀 你可能踩过的坑：

• 路径写错，或者构建工具没配置资源处理，图片加载失败
• 静态服务器没开，直接打开 HTML 无法访问文件（浏览器出于安全考虑禁止 file 协议访问）

💡 使用建议：

• 放到 public 目录，或者使用 import 静态资源方式处理
• 建议使用构建工具配置 alias 简化路径

---

三、Base64：字节转码“图片串”

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." />

这是把图片数据编码成 Base64 的字符串，直接塞进 HTML 或 JS 文件里。

🔬 本质上是啥？
Base64 是一种将二进制数据编码成 ASCII 字符串的方式。

✅ 优点：

• 免请求！嵌入式图片，一起打包进页面
• 没有跨域问题
• 非常适合小图标、loading 动画、SVG

❌ 缺点：

• 体积暴涨，大概比原图多 33%
• 可读性差，不利于维护
• 页面初始加载变慢

🧩 常见场景：

• CSS background-image
• 富文本编辑器中的粘贴图像
• 邮件嵌入图像

---

四、Blob：文件对象，前端造图必备

const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = URL.createObjectURL(blob);
img.src = url;

这是处理文件流时常见的一种格式。

🔍 本质上是啥？
Blob 是浏览器提供的一种二进制大对象，可以把它看作 JS 里的“文件”。

💪 优点：

• 可由 JS 动态生成，支持下载、预览、上传
• 可控制 MIME 类型，灵活性强
• 可以通过 URL.createObjectURL() 生成临时地址

📉 缺点：

• 是内存对象，页面刷新就没了
• 不能跨页面共享（临时的）

🧩 常见场景：

• 前端截图（canvas.toBlob()）
• 文件上传预览
• 后台生成图片后前端下载

---

五、ArrayBuffer / Uint8Array：最低层的图像数据表示

fetch('image.jpg')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    // 可以转为 blob 或 base64 再显示
  });

这是最底层的图像数据，直接以字节数组的形式存在。

🧠 本质上是啥？
ArrayBuffer 是一段原始的内存区域，常用于处理二进制数据，Uint8Array 是对它的视图（读取用）。

🧰 常见用途：

• 图像处理（比如 AI 模型的图片输入）
• 自定义图片加载器（如通过 WASM 解码）
• 二进制传输协议

🔄 转换方式：

• 转为 Blob：new Blob([buffer])
• 转为 Base64：btoa(String.fromCharCode(...new Uint8Array(buffer)))

---

🔄 图像形式转换总结表格

🧠 最后的总结：选哪种图像形式？

• ✅ 展示外部图 → 用 URL
• ✅ 项目图标/静态资源 → 本地路径
• ✅ 上传/预览/截图 → Blob
• ✅ 处理图像数据 → ArrayBuffer
• ✅ 小图或嵌入内容 → Base64

掌握这些图像“存在形式”，不仅能帮你写出更高效、稳定的代码，更能在项目中灵活切换，游刃有余！

本文转载于：https://juejin.cn/post/7495549439035195402

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源：https://www.cnblogs.com/smileZAZ/p/18884568