CODEWITHSUNDEEP
githubmarkdown
ogrodnek
ogrodnek

Reputation: 916

Is it possible to disable the automatic linking of images in github markdown rendering?

When github.com renders an image in a readme.md, it automatically links the image in an a tag.

Using either

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

or

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

The actual rendered content will appear as

<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>

I understand the github image caching (on camo.githubusercontent.com), and that's fine, but I don't want the a tag to wrap my image.

I'm not sure if this is part of the github flavored automatic URL linking, or something specific images.

I am able to provide my own link (using my own a tag), but what I really want is no link, no a tag.

Is this possible?

thanks!

Upvotes: 56

Views: 11284

Answers (6)

fivesquarz
fivesquarz

Reputation: 1

This method works the best for me: linking the image to itself

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

Upvotes: -1

BillyGalbreath
BillyGalbreath

Reputation: 410

You can use the <picture> tag to prevent GitHub from auto linking to the image.

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

Upvotes: 29

David Bercovici
David Bercovici

Reputation: 1

The snippet below is exactly what you need to "remove" the a tag for images. Markdown will render all the img's tags around the a. For me (using Gatsby) the option "linkImagesToOriginal: false" removed perfectly and now all the images are NOT clickable.

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

Upvotes: -1

Ismoh
Ismoh

Reputation: 1104

If you click on your badge, you think to see an image, but it is usually a html page with html-tags. That's why badges links to a different page by default.

@Tamás Sengel answer isn't bad, but looks like there were side effects like visual glitches @Igor mentioned.

I solved this problem by simply referring to my github page:

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

platform

It's a static badge build with shields.io and shouldn't link to source.

Upvotes: 0

Auguest G.
Auguest G.

Reputation: 7

Pass linkImagesToOriginal: false to gatsby-remark-images should be able to resolve this issue.

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

Upvotes: -1

glyvox
glyvox

Reputation: 58149

You can wrap the image in a link that points to #:

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

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

It will still be clickable, but won't open a new page, at least.

Upvotes: 48

Related Questions