记录---前端图像五兄弟：网络 URL、Base64、Blob、ArrayBuffer、本地路径，全整明白！
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<p>你有没有在写前端的时候，突然迷糊了：</p>
<blockquote>
<ul>
<li>为啥这张图片能直接 <code>src="https://xxx.jpg"</code> 就能展示？</li>
<li>为啥有时候图片是乱七八糟的一串 Base64？</li>
<li>有的还整出来个 Blob，看不懂但好像很高级？</li>
<li>有时还来个 <code>ArrayBuffer</code>，这又是哪位大哥？</li>
<li>最离谱的是：我本地图片路径写进去，怎么就不生效？</li>
</ul>
</blockquote>
<p>这些，其实都和“<strong>图像在前端的存在形式</strong>”有关。今天咱们就像唠家常一样，一口气整明白这几个常见的前端图像形式，用最接地气的方式讲明白，配上实例、场景分析，帮你彻底建立系统认知！</p>
</div>
<h2 data-id="heading-0">一、网络 URL：最熟悉的那张脸</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><img src="https://example.com/image.jpg" /></pre>
</div>
<div>
<div>
<p>这就是我们最常见的方式：网络地址。</p>
<p>📦 <strong>本质上是啥？</strong><br>
一个 HTTP(S) 请求，浏览器去服务器上拉图片回来。</p>
<p>👍 <strong>优点</strong>：</p>
<ul>
<li>用起来最简单，能连网就能显示</li>
<li>浏览器会缓存，提高加载效率</li>
<li>图片不占你的 HTML 或 JS 文件大小</li>
</ul>
<p>👎 <strong>缺点</strong>：</p>
<ul>
<li>依赖网络，断网就 GG</li>
<li>跨域可能出问题（特别是 canvas 想处理图片时）</li>
<li>没法离线用</li>
</ul>
<p>🧩 <strong>常见场景</strong>：</p>
<ul>
<li>图床、CDN 图片</li>
<li>用户头像、商品封面等动态内容</li>
</ul>
<hr>
<h2 data-id="heading-1">二、本地 URL（相对路径）：常被坑的老兄</h2>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><img src="./images/logo.png" /></pre>
</div>
<div>
<div>
<p>听起来像本地文件，实际上也是<strong>被打包进项目的资源文件路径</strong>。</p>
<p>⚙️ <strong>本质上是啥？</strong><br>
开发时是相对路径，生产环境通常会被 Webpack、Vite 等构建工具“处理成”一个真实可访问的路径，比如 <code>dist/assets/logo.abcd1234.png</code>。</p>
<p>👀 <strong>你可能踩过的坑</strong>：</p>
<ul>
<li>路径写错，或者构建工具没配置资源处理，图片加载失败</li>
<li>静态服务器没开，直接打开 HTML 无法访问文件（浏览器出于安全考虑禁止 file 协议访问）</li>
</ul>
<p>💡 <strong>使用建议</strong>：</p>
<ul>
<li>放到 <code>public</code> 目录，或者使用 import 静态资源方式处理</li>
<li>建议使用构建工具配置 alias 简化路径</li>
</ul>
<hr>
<h2 data-id="heading-2">三、Base64：字节转码“图片串”</h2>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." /></pre>
</div>
<div>
<div>
<p>这是把图片数据编码成 Base64 的字符串，直接塞进 HTML 或 JS 文件里。</p>
<p>🔬 <strong>本质上是啥？</strong><br>
Base64 是一种将二进制数据编码成 ASCII 字符串的方式。</p>
<p>✅ <strong>优点</strong>：</p>
<ul>
<li>免请求！嵌入式图片，一起打包进页面</li>
<li>没有跨域问题</li>
<li>非常适合小图标、loading 动画、SVG</li>
</ul>
<p>❌ <strong>缺点</strong>：</p>
<ul>
<li>体积暴涨，大概比原图多 33%</li>
<li>可读性差，不利于维护</li>
<li>页面初始加载变慢</li>
</ul>
<p>🧩 <strong>常见场景</strong>：</p>
<ul>
<li><code>CSS background-image</code></li>
<li>富文本编辑器中的粘贴图像</li>
<li>邮件嵌入图像</li>
</ul>
<hr>
<h2 data-id="heading-3">四、Blob：文件对象，前端造图必备</h2>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">const blob = new Blob(, { type: 'image/png' });
const url = URL.createObjectURL(blob);
img.src = url;</pre>
</div>
<div>
<div>
<p>这是处理文件流时常见的一种格式。</p>
<p>🔍 <strong>本质上是啥？</strong><br>
<code>Blob</code> 是浏览器提供的一种二进制大对象，可以把它看作 JS 里的“文件”。</p>
<p>💪 <strong>优点</strong>：</p>
<ul>
<li>可由 JS 动态生成，支持下载、预览、上传</li>
<li>可控制 MIME 类型，灵活性强</li>
<li>可以通过 <code>URL.createObjectURL()</code> 生成临时地址</li>
</ul>
<p>📉 <strong>缺点</strong>：</p>
<ul>
<li>是内存对象，页面刷新就没了</li>
<li>不能跨页面共享（临时的）</li>
</ul>
<p>🧩 <strong>常见场景</strong>：</p>
<ul>
<li>前端截图（<code>canvas.toBlob()</code>）</li>
<li>文件上传预览</li>
<li>后台生成图片后前端下载</li>
</ul>
<hr>
<h2 data-id="heading-4">五、ArrayBuffer / Uint8Array：最低层的图像数据表示</h2>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">fetch('image.jpg')
.then(res => res.arrayBuffer())
.then(buffer => {
// 可以转为 blob 或 base64 再显示
});</pre>
</div>
<div>
<div>
<p>这是最底层的图像数据，直接以字节数组的形式存在。</p>
<p>🧠 <strong>本质上是啥？</strong><br>
<code>ArrayBuffer</code> 是一段原始的内存区域，常用于处理二进制数据，<code>Uint8Array</code> 是对它的视图（读取用）。</p>
<p>🧰 <strong>常见用途</strong>：</p>
<ul>
<li>图像处理（比如 AI 模型的图片输入）</li>
<li>自定义图片加载器（如通过 WASM 解码）</li>
<li>二进制传输协议</li>
</ul>
<p>🔄 <strong>转换方式</strong>：</p>
<ul>
<li>转为 Blob：<code>new Blob()</code></li>
<li>转为 Base64：<code>btoa(String.fromCharCode(...new Uint8Array(buffer)))</code></li>
</ul>
<hr>
<h2 data-id="heading-5">🔄 图像形式转换总结表格</h2>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202505/2149129-20250519172010418-387949300.png" alt="" loading="lazy"></p>
<div>
<div>
<h2 data-id="heading-6">🧠 最后的总结：选哪种图像形式？</h2>
<ul>
<li>✅ <strong>展示外部图 → 用 URL</strong></li>
<li>✅ <strong>项目图标/静态资源 → 本地路径</strong></li>
<li>✅ <strong>上传/预览/截图 → Blob</strong></li>
<li>✅ <strong>处理图像数据 → ArrayBuffer</strong></li>
<li>✅ <strong>小图或嵌入内容 → Base64</strong></li>
</ul>
<p>掌握这些图像“存在形式”，不仅能帮你写出更高效、稳定的代码，更能在项目中灵活切换，游刃有余！</p>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7495549439035195402</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18884568
頁:
[1]