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

Abierto
  • ¿Algo no está bien?
#27 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
50/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
html
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

问题概述 / 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.
Lenguaje dominante
Sin datos de lenguaje
Estrellas
6
Forks
0
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AstrBotDevs/astrbot-cloud-issues

Todos los issues de AstrBotDevs/astrbot-cloud-issues

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.