[Bug] 插件详情页“文档”标签中，README 的相对路径图片无法加载

Đang mở
  • Có gì không ổn?
#27 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
Nửa ngày
Mức phù hợp với người mới
50/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
html
Lĩnh vực
frontend

Hướng nghiên cứu

Start in the MarkdownContent component, where the relative-path rewrite to raw.githubusercontent.com already runs for the source branch but not for the non-empty html branch that only goes through DOMPurify. Reuse that resolver on img[src] and a[href] in the html path, then check a plugin page such as meme_manager with its docs tab. Done when relative image paths in readme_html load from GitHub and absolute URLs are left unchanged.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

问题概述 / Summary

插件 README 中使用仓库相对路径引用的图片（如 <img src="docs/preview.png">、![预览](docs/preview.png)），在 GitHub 上能正常显示，在 AstrBot Cloud 插件详情页的“文档”标签中显示为加载失败。

前端 MarkdownContent 组件已有相对路径解析逻辑：把相对地址改写为 https://raw.githubusercontent.com/{owner}/{repo}/{git_commit}/{path}。但这段逻辑只在渲染 Markdown 源文（source）时执行。插件详情接口返回非空 readme_html 时，组件只对 readme_html 做 DOMPurify 清洗后直接渲染，不经过相对路径解析。readme_html 中的相对路径因此原样保留，浏览器按页面地址把它解析为 https://cloud.astrbot.app/plugin/{owner}/{path}，该地址返回 404（text/html）。

复现步骤 / Steps to reproduce

  1. 打开以下任一插件详情页的“文档”标签，它们的 README 都用仓库相对路径引用图片：
  2. 这些图片显示为加载失败；同一 README 在 GitHub 上正常显示。
  3. 对照接口 GET /api/v1/market/plugins/{slug}：readme 与 readme_html 中这些图片的 src 都保持相对路径。

按市场列表接口统计，前 300 个插件中有 53 个在 README 中用相对路径引用图片，它们的 readme_html 都非空，均受影响。

期望行为 / Expected behavior

readme_html 中的相对 img src（以及相对 a href）与 Markdown 源文路径一样，按插件仓库和收录提交解析为 GitHub 地址，图片正常显示。

实际行为 / Actual behavior

图片显示为加载失败；请求地址为 https://cloud.astrbot.app/plugin/{owner}/{相对路径}，返回 404（text/html）。文件是否打包在插件 zip 中没有区别，例如插件根目录下的 logo.png 同样 404。

相关页面或资源链接 / Related URL

  • 上述 4 个插件详情页（见复现步骤）。
  • 前端组件 MarkdownContent：html 非空时只调用 DOMPurify 清洗；相对路径解析只在渲染 source 的分支中执行。

AstrBot Cloud 版本或环境 / Version or environment

线上 https://cloud.astrbot.app，2026-11-01；桌面浏览器。

日志、截图或其他上下文 / Logs, screenshots, or context

可能的修复方式：在 html 分支清洗前后，对 img[src] 与 a[href] 复用现有的相对路径解析函数；或在服务端生成 readme_html 时传入仓库上下文，让 GitHub 渲染结果中的相对路径变成绝对地址。

插件作者目前的规避方式是把 README 图片改成绝对地址。

提交前确认 / Checklist

  • 我已搜索现有 issue，确认没有重复反馈。 / I searched existing issues and found no duplicate.
  • 我已移除反馈中的密码、Token、Cookie 等敏感信息。 / I removed passwords, tokens, cookies, and other sensitive information.
Ngôn ngữ chính
Không có dữ liệu ngôn ngữ
Star
6
Fork
0
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của AstrBotDevs/astrbot-cloud-issues

Tất cả issue của AstrBotDevs/astrbot-cloud-issues

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.