記錄---前端圖像五兄弟：網絡 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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
浙公網安備 33010602011771號