Vibe Coding 使用外部图片

在 Vibe Coding 的流程中，虽然单一文件的开发模式让部署与分享变得非常简单，但是视觉美感往往却是 Vibe Coding 的问题与痛点，到底该如何让图片稳定、优雅地呈现呢？这篇教学将深入探讨三种实战策略，从最暴力的 Base64 内嵌，到灵活的 Postimages 图床，甚至是利用 Github 或 Google Drive 作为资源库，透过这些外部图片的处理心法，确保 Vibe Coding 可以忠实呈现艺术美感。

• 更多参考：Vibe Coding 全方位开发导读
• 延伸阅读：Vibe Coding 玩家必备的 SVG 进阶操作指南

快速导览：

• 使用网页图片空间 Postimages
• 使用 Github 作为图片空间
• 使用 Google 云端硬盘分享图片 ( 不建议 )
• 使用 Base64 图片编码 ( 不建议 )

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

使用网页图片空间 Postimages

Postimages 是一个老牌且极简的免费图片托管服务。它与 Imgur 不同，Imgur 近年来限制了许多外部嵌入功能 ( 而且台湾需要挂载国外 VPN 才能用 )，而 Postimages 依然对开发者非常友善，提供稳定的直接链接，因此在 Vibe Coding 的流程中，Postimages 通常被视为最快捷、无负担的“临时图床解决方案”。

前往 Postimages：https://postimages.org/

打开 Postimages 之后 ( 下方有语言按钮可以切换繁体中文 )，可以在“不注册”的状态，点击“选择图片”上传图片，上传时还可以选择“裁切尺寸”和“到期日”，到期日表示时间到了之后就会删除图片。

上传图片后，下方可以看到这张图片的链接，使用链接就可以加载图片。

如果要删除图片，可以点击图片上的“齿轮”图案，就会出现删除选项。

如果要更近一步管理图片，就必须“注册账号”，注册账号之后还可以建立自己的相册进行管理。

使用 Github 作为图片空间

在“Vibe Coding 实战：使用 GitHub 部署你的网页作品”教学中有介绍将 Github 当作部署网页的空间，因此 Github 自然也可以当作图片空间使用，参考教学先进行下列步骤：

• 参考：Github 起手式：建立 GitHub 储存库 ( Repository )
  • 动作 1、注册 Github 账号。
  • 动作 2、建立一个“储存库 ( Repository )”。
• 参考：建立 gh-pages 分支，产生对外公开网址
  • 动作 3、建立 gh-pages 分支，产生对外公开网址。

步骤完成后，切换到 gh-pages 分支，点击“Add file > Upload files”。

选择图片之后，输入这次 Commit changes 的标题，按下 Commit changes 就开始上传图片。

切换到这个 Github 储存库的设定画面，点击“Pages”，查看公开网址。

打开网址后，加上图片的档名，如果可以看到图片表示可以顺利加载图片 ( Commit 后要先等一到三分钟，部署完成就可以看到图片 )。

使用 Google 云端硬盘分享图片 ( 不建议 )

许多人习惯将素材放在 Google 云端硬盘 ( Google Drive )，只要透过“分享”和“修改网址”的方式，就可以把 Google 云端硬盘当作图片空间使用。首先先前往自己的 Google 云端硬盘，把要分享图片的文件夹权限设定为“知道链接的任何人都是检视者”，如此一来里面所有的图片权限都会相同 ( 也可以个别设定图片自己的权限 )。

使用 Google 云端硬盘有连线数的限制，建议只用在个人练习或展示使用。

用鼠标在要分享的图片上按下右键，选择“共用 > 复制链接”。

特别注意！因为 Google 云端硬盘默认的“分享链接”会导向预览页面，无法直接打开图片，需要透过“检查网页”的方式，取得图片真正的网址，打开分享的图片网址后，在最上方的区域点击右键选择“检查” ( 图片区域无法点击右键，或透过热键打开网页开发者工具 )。

打开开发者工具后，先点击工具左上方“选取元素”按钮，接着点选“图片”，这时从开发者工具里的“Elements 页签”就可以看到图片真正的网址。

复制然后打开网址，就可以看到最纯粹的图片。

透过 Google 云端硬盘分享得图片，可以透过“网址参数”的方式，修改图片“实际尺寸”，如果仔细观察网址，会发现默认网址有一段“=s1600-rw-v1”的字串，只要修改“1600”位置的数字，就可以指定图片的“最大边长”，例如下图，将网址改成“=s300-rw-v1”，最大边长就会变成 300px。

使用 Base64 图片编码 ( 不建议 )

在 Vibe Coding 的情境下，Base64 编码是一种非常神奇的格式，因为它能让图片“变成代码的一部分”，这表示不需要管理额外的图档路径，AI 就能直接把整张图片的内容写进 HTML 或 CSS 文件里。

• Base64 并不是一种像 JPG 或 PNG 那样的“图片格式”，而是一种“二进制转文字”的编码方式，它将图片的二进制数据转换成由 64 个可打印字元 ( A-Z, a-z, 0-9, +, / ) 组成的长字串，并在网页中透过 Data URI 语法来呼叫使用。
• 许多线上工具都可以将图片转换为 Base64，例如：https://www.base64-image.de/。

举例来说，下面这段 Base64 编码的图片，在网页里面会呈现一张“火焰”的图案 ( 细节语法参考：HTML 图片、CSS 背景图片 ( 定位、定位点、尺寸 ) )。

data:image/png;base64,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

虽然 Base64 编码图片看似方便，实际上却鲜少投入实战开发，因为 Base64 会让文件体积膨胀约 33%，如果把一张 5MB 的照片转成 Base64，网页源代码会变成几百万行，严重拖慢浏览器解析 HTML 的速度，而且在 Vibe Coding 时，冗长且完全看不懂的 Base64 字串会占据整个屏幕，造成编辑时变得很困难。

如果有需要使用 Base64 编码图片，建议是“简单图片”、“文件非常小的图档”或“单色图档”，会比较容易处理后续的各种状况。

下方列出一些 Base64 和外部链接图片的差异对照：

小结

在 Vibe Coding 的过程中，图片不该是阻碍开发节奏的绊脚石。无论是为了追求极速开发而选择 Base64，或是为了长期维护而配置 Postimg 与 Google 云端硬盘，核心目标都会在开发效率与用户经验之间找到最佳平衡点，当下次与 AI 协作时，可以根据专案的规模灵活切换这几种策略，别让“破图”或“繁琐的文件管理”打断了创作心流。

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈