🍲 美食养生公众号 · 图文交付单

测试文：图片相对路径方案 ｜ 生成时间：2026-10-08
📄 【公众号全文】
标题、正文可分别复制
✏️ 公众号编辑器预览（复制下面的内容粘贴即可）
标题区

秋燥润肺，先给肺补点水｜本文为图片相对路径测试版

美食养生 · 2026年10月8日

正文区
秋燥润肺配图

这篇是配图"相对路径"加载的测试文章：图片不再内嵌成 base64 大段代码，而是直接引用同目录下 food_images/ 里的图片文件。整页体积从几百 KB 降到几十 KB，手机浏览器打开明显变快。

一、相对路径怎么引用

写法很简单：<img src="food_images/qiuzhao_runfei.jpg">。图片文件和 HTML 放在同一个账号目录下（accounts/美食养生/），双击打开 HTML、或通过 HTTP 服务访问，都能正常显示。

二、怎么验证

1. 直接打开本页，看上方配图是否正常显示；2. 手机浏览器访问 http://luckymiaow.com:4111，进美食养生账号点开本文，验证移动端加载速度。

⚠️ 一个重要提醒

把正文复制到公众号编辑器时，本地相对路径的图片不会跟着上传，需要你在编辑器里手动上传封面图（food_images/qiuzhao_runfei.jpg）。这也是相对路径方案的唯一代价，其余展示环节（预览、分享、外网浏览）都不受影响。

✅ 测试要点总结

· 相对路径优点：HTML 体积小、加载快、便于 HTTP 服务浏览

· ⚠️ 复制到公众号后需手动补传图片（唯一注意项）

📌 本文配图使用相对路径引用（food_images/qiuzhao_runfei.jpg），未内嵌 base64。若打开本页图片不显示，请确认该图片文件存在且位于 accounts/美食养生/food_images/ 目录下。
🖼️ 【配图说明】
图片内容秋燥润肺主题静物图：温暖木桌上放着雪梨、百合、枸杞红枣汤碗，冒着热气，背景是秋日窗边自然光。
视觉风格美食摄影 · 自然光 · 温暖治愈 · 有食欲，暖橙+米白+浅绿配色，与文章排版色系一致。
用途公众号封面主图（文章唯一配图），位于标题正下方、正文最前面，居中铺满。
尺寸2960×1260（约2.35:1，公众号封面推荐比例）；文件：food_images/qiuzhao_runfei.jpg。
引用方式相对路径 src="food_images/qiuzhao_runfei.jpg"，未内嵌 base64，HTML 体积约几 KB（原 base64 版 600+KB）。
生成方式AI 生成（非图库、非实拍），无版权风险；文中仅此一张图。
📐 【排版指南】
元素说明
封面标题20px 加粗，深色 #1a1a1a
日期标注13px，橙色 #b45309
二级小标题17px 加粗，绿色 #16a34a，左侧4px竖条
提醒小标题暖橙色 #ea9420（本文"⚠️ 一个重要提醒"用橙色区分）
要点卡片浅绿 #f0fdf4，圆角10px
配图相对路径引用，width:100% 自适应，圆角8px，位于标题正下方
正文15px，行高1.9，大白话风格
复制按钮复制标题 / 复制正文 / 一键复制全文（复制时自动隐藏徽章与虚线框）
📌 相对路径方案核心约定：图片统一放 accounts/{账号名}/food_images/，HTML 内用相对路径引用（如 food_images/qiuzhao_runfei.jpg）；HTML 与图片必须同目录，随文件一起拷贝/部署；复制到公众号编辑器时需手动上传封面图。方案优势：HTML 体积减小 90%+，移动端打开更快，HTTP 服务浏览更流畅。