在 README 中添加带有 Github 风味 Markdown 链接的图像

Question

如何将带有链接的可点击图像添加到 GitHub

README.md

文件中？ 例如“给我买一个甜甜圈”徽章：

图像是SVG文件，所以应该也可以设置特定的宽度。
生成的 HTML 应如下所示：

<a href="https://www.buymeacoffee.com/tobse" rel="nofollow">
    <img alt="Buy me a Donut" 
         src="https://raw.githubusercontent.com/tobsef/tobsef/master/img/buy-me-a-donut.svg" 
         width="245px"
    ">
</a>

Answer 1

对于 Github 风味的 Markdown，可以通过两种不同的方式实现。

1.在 Markdown 语法中

[buy-me-a-donut]: https://www.buymeacoffee.com/tobse
[![Buy me a Donut](https://raw.githubusercontent.com/tobsef/tobsef/master/img/buy-me-a-donut.svg)][buy-me-a-donut]

第一个括号（

[Buy me a Donut]

）中的内容是图像

alt

属性。
在此示例中，链接被分隔为

[buy-me-a-donut]

。这是可选的，但可以保持 Markdown 文件干净。您还可以在一行中添加图像：

[![Buy me a Donut](https://raw.githubusercontent.com/tobsef/tobsef/master/img/buy-me-a-donut.svg)][https://www.buymeacoffee.com/tobse]

2.使用内联 HMTL

Github 风格还支持一小部分 HTML。因此可以简单地使用

img

元素：

[buy-me-a-donut]: https://www.buymeacoffee.com/tobse
[<img alt="Buy me a Donut" width="245px" src="https://raw.githubusercontent.com/tobsef/tobsef/master/img/buy-me-a-donut.svg" />][buy-me-a-donut]

使用此语法，您还可以添加其他属性，例如

width="245px"

，甚至通过

align="center"

更改布局。
如果你喜欢简洁的版本，也可以写成一行：

[<img alt="Buy me a Donut" width="245px" src="https://raw.githubusercontent.com/tobsef/tobsef/master/img/buy-me-a-donut.svg" />][https://www.buymeacoffee.com/tobse]