在使用 Fuwari 博客主题时，你可能会发现 RSS 订阅中的图片无法正常显示。这是因为 Astro 框架在处理图片时会对路径进行转换，导致 RSS 阅读器无法正确加载图片。本指南将详细介绍如何解决这个问题。
当你在 Markdown 文件中使用相对路径引用图片时：
Astro 在构建过程中会：
_astro/ 目录但在 RSS 生成时，这些转换后的路径对外部 RSS 阅读器来说是无效的。
Fuwari 通过以下步骤解决图片路径问题：
import.meta.glob() 获取所有图片// 使用 glob 模式匹配所有图片文件
const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
"/src/content/posts/**/*.{jpeg,jpg,png,gif,webp}",
);
这行代码会创建一个映射表，包含项目中所有的图片文件。
export async function GET(context: APIContext) {
const blog = await getSortedPosts();
const feed = [];
for (const post of blog) {
// 清理内容中的无效字符
const cleanedContent = stripInvalidXmlChars(content);
// 转换 Markdown 为 HTML
const body = parser.render(cleanedContent);
// 创建可操作的 DOM 结构
const html = htmlParser.parse(body);
// 处理所有图片标签
const images = html.querySelectorAll("img");
// ... 图片处理逻辑
}
}
for (const img of images) {
const src = img.getAttribute("src");
if (!src) continue;
if (src.startsWith("./")) {
// 处理相对路径图片
const prefixRemoved = src.replace("./", "");
const imagePathPrefix = `/src/content/posts/${post.slug}/${prefixRemoved}`;
const imagePath = await imagesGlob[imagePathPrefix]?.()?.then(
(res) => res.default,
);
if (imagePath) {
const optimizedImg = await getImage({ src: imagePath });
img.setAttribute(
"src",
context.site + optimizedImg.src.replace("/", ""),
);
}
} else if (src.startsWith("/")) {
// 处理 public 目录图片
img.setAttribute("src", context.site + src.replace("/", ""));
}
// HTTP/HTTPS 绝对路径保持不变
}
如果你的文章结构如下：
src/content/posts/
├── my-post/
│ ├── index.md
│ └── images/
│ ├── screenshot.png
│ └── diagram.jpg
在 index.md 中引用图片：
Fuwari 会自动处理这些路径，确保在 RSS 中正确显示。
对于放在 public/ 目录下的图片：
系统会自动添加网站域名前缀。
默认支持的格式包括：
如需支持其他格式，可以修改 glob 模式：
const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
"/src/content/posts/**/*.{jpeg,jpg,png,gif,webp,svg,avif}",
);
确保在 astro.config.mjs 中正确设置了网站 URL：
export default defineConfig({
site: 'https://your-domain.com',
// 其他配置...
});
# 查看 dist/rss.xml 内容
cat dist/rss.xml
/rss.xml 查看内容body 内容如果项目中图片很多，可以考虑：
通过以上配置和优化，你的 Fuwari 博客的 RSS 订阅将能够完美显示所有图片内容，为读者提供更好的阅读体验。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。