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!
GitHub uses its own Markdown processor; GitHub Pages uses jekyll-commonmark. This means your README.md file will look different on GitHub's website than on your GitHub Pages website. For example, emoji are rendered on GitHub's website, but not on websites generated using GitHub Pages.
Just add an <img> tag to your README.md with relative src to your repository. If you're not using relative src, make sure the server supports CORS.
There are two ways to create links. Or leave it empty and use the link text itself. URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).
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.
Pass linkImagesToOriginal: false
to gatsby-remark-images
should be able to resolve this issue.
{ resolve: 'gatsby-remark-images', options: { linkImagesToOriginal: false, }, }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With