README图片在仓库主页不显示及尺寸调整的解决方案咨询

问题根因 #

你将<img>标签嵌套在<pre><code>代码块内部，平台渲染时会把这段内容当成纯代码文本处理，不会执行其中的HTML标签逻辑：

• 仓库主页的代码块渲染规则会完全过滤内部HTML的执行能力，仅展示原始文本，因此图片无法正常显示
• 文件详情页的渲染逻辑存在差异，才会意外加载出图片内容

方案一：正确使用HTML标签实现尺寸控制 #

不需要把img标签放在代码块里，直接在Markdown内容中裸写img标签即可，GitHub、Bitbucket的主页和详情页均支持这类原生HTML标签：

<img src="./images/test.jpg" width="200" alt="测试图片">

• 可以直接在标签属性中设置width、height、对齐方式等样式，兼容性最好
• 注意图片路径要和README所在目录保持正确的相对层级关系

方案二：纯Markdown语法实现尺寸调整 #

如果不想混用HTML，可使用当前GitHub、Bitbucket通用的Kramdown扩展属性语法，在常规图片语法后追加花括号配置样式：

![测试图片](./images/test.jpg){: width="200"}

• 该写法完全符合Markdown扩展规范，不会出现主页不渲染的问题
• 同样支持设置高度、圆角、对齐等属性，示例：{: width="200" style="border-radius: 8px"}
• 若遇到旧版本平台不支持该属性语法，直接切换为方案一的裸HTML写法即可兼容

内容的提问来源于stack exchange，提问作者c_s