在GitHub的Markdown渲染中，是否有可能禁用图像的自动链接？

Question

当github.com在readme.md文件中渲染一张图片时，它会自动在一个a标签中链接该图片。

使用以下任一方式：

![][http://example.com/path/image]

或者

<img src="http://example.com/path/image" />

实际呈现的内容将显示为

<a href="https://camo.githubusercontent.com/8a545f12e16ff12fd...." target="_blank"><img src="https://camo.githubusercontent.com/8a545f12e16ff12f..." alt="" data-canonical-src="http://example.com/path/image" style="max-width:100%;"></a>

我理解github图像缓存（在camo.githubusercontent.com上）,这很好，但是我不想让a标签包裹我的图片.

我不确定这是否是github自动URL链接的一部分，还是特定于图像的某些东西。

我可以提供自己的链接（使用自己的a标签），但我真正想要的是没有链接，没有a标签。

这有可能吗？

谢谢！

- ogrodnek

---

你还想要显示图片，还是只想将URL作为文本显示？ - Waylan

我想要显示图像，但是不添加链接。 - ogrodnek

据推测，这是GitHub内置的Markdown解析器所构建的。没有任何不同的Markdown语法可以逃避这种行为。因此，我很抱歉，这是不可能的，这也是将文档托管在其他服务器上时需要权衡的其中之一。您会失去对事物运作方式的控制。 - Waylan

Answer 1

您可以将图像包装在指向#的链接中：

[![](http://example.com/path/image)](#)

<a href="#"><img src="http://example.com/path/image" /></a>

它仍然可点击，但至少不会打开新页面。

- Tamás Sengel

---

我不同意它完全没有帮助，使用它可以让读者始终停留在同一页上，虽然这不是很好，但显然比让读者跳到其他地方要好。 - Luis Ferrao

好的方法，但如果你在Github个人资料的readme中使用它，点击#链接会导致左侧栏（照片下方）出现奇怪的视觉故障。 - Igor

现在使用Markdown选项实际上会删除链接！ - flying sheep

@flyingsheep，你有这方面的一个可用示例吗？对我来说它不起作用。 - Alex Hall

请注意，如果您有类似 (#---) 的内容，它至少不会滚动到页面顶部。这是因为您引用了一个不存在的锚点 ---，所以浏览器不会滚动页面。 - DecimalTurn

Answer 2

你可以使用 <picture> 标签来防止GitHub自动链接到图像。

<picture>
  <img alt="Image Alt Text" src="http://example.com/path/image">
</picture>

- BillyGalbreath

---

这应该是我个人认为的最佳答案。功能非常优美。 - otuva

可以确认，这将防止GitHub渲染a元素。 - Manuel

所提供的代码不完整，因为Github将尝试根据颜色方案（浅色/深色）显示图像，因此您需要包含链接中呈现的完整示例（需要包括完整的prefers-color-scheme：dark / prefers-color-scheme：light逻辑）。要测试此用例，请在设置中切换Github颜色浅色/深色方案并观察。如果操作不正确，则您的图像将根据活动的浅色/深色方案消失/重新出现。 - richbl

Answer 3

将linkImagesToOriginal: false传递给gatsby-remark-images应该可以解决这个问题。

{
 resolve: 'gatsby-remark-images',
 options: {
   linkImagesToOriginal: false,
 },
}

- Auguest G.

---

我该如何将这个配置应用到我的Github.com内容中？ - akauppi

Answer 4

以下代码片段正是您需要的，用于“删除”图像的标签。Markdown将呈现所有围绕的标签。对于我来说（使用Gatsby），选项“linkImagesToOriginal：false”完美地移除了它，现在所有图像都不可点击。

{
 resolve: 'gatsby-remark-images',
 options: {
   linkImagesToOriginal: false,
 },
}

- David Bercovici

---

这与@Auguest G.的回答有何不同？他的回答比你的早了大约一年。 - Matt Popovich

Answer 5

如果您单击您的徽章，您可能认为将会看到一张图像，但实际上它通常是一个带有HTML标签的网页。这就是为什么默认情况下徽章链接到不同页面的原因。

@ Tamás Sengel的答案并不坏，但看起来会有一些副作用，如@Igor提到的视觉故障。

我通过简单地引用我的github页面来解决这个问题：

[![platform](https://img.shields.io/badge/platform-ubuntu%20%7C%20windows-lightgrey?style=flat-square)](https://github.com/Ismoh/NoitaMP)

这是一个使用shields.io构建的静态徽章，不应链接到source。

- Ismoh

Answer 6

这种方法对我来说效果最好：将图像链接到自身

<a id="image1" href="#image1"><img alt="alt text" src="http://example.com/path/image.png" /></a>

- fivesquarz