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

2025年6月15日
| 没有评论

🧑‍ 写在开头

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

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

  • 为啥这张图片能直接 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

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

brower, nodejs, vue, 前端