[Bug] 项目 README 中引用的仓库内图片无法正常展示
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 719
- Avg merge
- 4h 30m
- Merged PRs (30d)
- 83
Description
问题描述
在项目「信息」页渲染仓库 README 时,README 中通过相对路径引用的仓库内图片无法正常展示。
Markdown 图片会显示为破图;README 中的原生 HTML(例如 <details><img ...></details>)还会被当作普通文本展示。该问题会影响包含界面截图、架构图或使用说明图片的项目 README。
复现步骤
- 添加一个 README 中包含仓库内相对图片路径的项目。
- README 使用以下任一写法:

或<img src="./docs/images/example.png"> - 进入该项目的「信息」页并查看 README。
实际结果
- Markdown 相对图片请求落到当前前端页面路径,无法读取私有仓库中的文件,图片显示为破图。
- 原生 HTML 图片语法未被 README 渲染器处理,相关标签显示为文本。
预期结果
- README 中的 HTTP(S) 外链图片保持原地址。
- 仓库内相对图片应基于 README 文件所在目录解析,并从当前项目与所选分支读取。
- 图片响应应返回真实媒体类型,避免扩展名与内容类型不一致时出现乱码。
- 原生 HTML
<img>在安全净化后可以正常展示。 - 非法协议、越界路径、非图片内容及超大文件应被拒绝。
复现环境
- MonkeyCode:
main@acd16884 - 浏览器: Chrome
- 测试仓库 README:包含两张 Markdown 相对图片和一张
<details>内的 HTML 图片 - 测试样本扩展名为
.png,实际文件内容为 JPEG,可同时验证内容嗅探
截图证据
修复前:两张 Markdown 图片均显示为破图,HTML 标签显示为文本:
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the README renderer used on the project’s information page and reproduce the issue with the Markdown and HTML image examples described here. Trace relative-image resolution, selected-branch file access, media responses, and HTML sanitization. Done means external URLs remain unchanged, valid repository images render safely, and invalid protocols, traversal, non-images, and oversized files are rejected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100