508 字
3 分钟
fuwari修复RSS图片不显示
2025-09-27

前言#

啊大家都知道,fuwari的RSS如果你用的是相对路径,那么生成的RSS将也是相对路径,但这样就看不了图了啊,所以本章将带你修复它

修改RSS配置文件#

打开src/pages/rss.xml.ts,当然你也可以直接删了
直接一个全选删除再将下面的配置粘贴填入

import rss from '@astrojs/rss';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
import { getCollection } from 'astro:content';
import { siteConfig } from '@/config';
import { parse as htmlParser } from 'node-html-parser';
import { getImage } from 'astro:assets';
import type { APIContext, ImageMetadata } from 'astro';
import type { RSSFeedItem } from '@astrojs/rss';
import { getSortedPosts } from '@/utils/content-utils';
const markdownParser = new MarkdownIt();
// get dynamic import of images as a map collection
const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
'/src/content/**/*.{jpeg,jpg,png,gif,webp}', // include posts and assets
);
export async function GET(context: APIContext) {
if (!context.site) {
throw Error('site not set');
}
// Use the same ordering as site listing (pinned first, then by published desc)
const posts = await getSortedPosts();
const feed: RSSFeedItem[] = [];
for (const post of posts) {
// convert markdown to html string
const body = markdownParser.render(post.body);
// convert html string to DOM-like structure
const html = htmlParser.parse(body);
// hold all img tags in variable images
const images = html.querySelectorAll('img');
for (const img of images) {
const src = img.getAttribute('src');
if (!src) continue;
// Handle content-relative images and convert them to built _astro paths
if (src.startsWith('./') || src.startsWith('../')) {
let importPath: string | null = null;
if (src.startsWith('./')) {
// Path relative to the post file directory
const prefixRemoved = src.slice(2);
importPath = `/src/content/posts/${prefixRemoved}`;
} else {
// Path like ../assets/images/xxx -> relative to /src/content/
const cleaned = src.replace(/^\.\.\//, '');
importPath = `/src/content/${cleaned}`;
}
const imageMod = await imagesGlob[importPath]?.()?.then((res) => res.default);
if (imageMod) {
const optimizedImg = await getImage({ src: imageMod });
img.setAttribute('src', new URL(optimizedImg.src, context.site).href);
}
} else if (src.startsWith('/')) {
// images starting with `/` are in public dir
img.setAttribute('src', new URL(src, context.site).href);
}
}
feed.push({
title: post.data.title,
description: post.data.description,
pubDate: post.data.published,
link: `/posts/${post.slug}/`,
// sanitize the new html string with corrected image paths
content: sanitizeHtml(html.toString(), {
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
}),
});
}
return rss({
title: siteConfig.title,
description: siteConfig.subtitle || 'No description',
site: context.site,
items: feed,
customData: `<language>${siteConfig.lang}</language>`,
});
}

保存了,还需要安装一个pnpm包,不用管是什么,能帮我们转换成链接就是的了

Terminal window
pnpm add node-html-parser
WARNING

在推送到仓库时,你可能会遇到warning: in the working copy of ‘pnpm-lock.yaml’, LF will be replaced by CRLF the next time Git touches it 这是由于空格不同引起的,但并不会影响部署,忽略即可

fuwari修复RSS图片不显示
https://mcxclr.top/posts/fuwari-rss/
作者
星辰旅人
发布于
2025-09-27
许可协议
CC BY-NC-SA 4.0