Unable to embed a gif on imgur to a README.md on g

2019-04-30 03:02发布

问题:

I want to show a large gif on README.md. Firstly, I uploaded it to imgur. And then, I added the url to README.md # <img alt="YAP" src="http://i.imgur.com/dNYswmI.gif">. But it cannot be loaded, it was compiled to:

<a href="https://camo.githubusercontent.com/b4f1167e599ce7936bb83aad5d007ca8f04345ac/687474703a2f2f692e696d6775722e636f6d2f644e5973776d492e676966" target="_blank">
    <img alt="YAP" src="https://camo.githubusercontent.com/b4f1167e599ce7936bb83aad5d007ca8f04345ac/687474703a2f2f692e696d6775722e636f6d2f644e5973776d492e676966" data-canonical-src="http://i.imgur.com/dNYswmI.gif" style="max-width:100%;"></a>

This is my README.

###Description
  A open source player.

###Screenshot
# <img alt="YAP" src="http://i.imgur.com/dNYswmI.gif">

回答1:

GitHub does support Imgur embeds. Make sure to provide the image extension, which isn't on Imgurs default share hyperlink.

BAD

![Imgur Image](http://i.imgur.com/zTONrOD)

GOOD

![Imgur Image](http://i.imgur.com/zTONrOD.jpg)

Imgur also provides this preformatted link under the MarkDown links menu, see image below.

See also an example readme.md with Imgur image.



回答2:

The gif you shared is 19MB in size.

GitHub routes all content through https://camo.githubusercontent.com/ even for external source now. Sharing a file that is bigger than the size limit (10MB) will get you a "Content length exceeded" error.

I tried sharing it on Google Drive, Dropbox, Droplr, my own server all ran into this issue unless the file size is below 10MB. It also doesn't matter if your syntax is in html or markdown.

<img src="https://static01.bbi.io/2Wt9Tk.gif"/>

!(image)[https://static01.bbi.io/2Wt9Tk.gif]

Your solution is to resize your gif. You can do it with service like this one: https://ezgif.com/resize .



回答3:

I believe the only way to link images from imgur would be something like this:

![An open source player](http://i.imgur.com/dNYswmI.gif)

However (in my experience) GitHub does not support imgur, I do not know if there are any other supported image share service.

If you can't find a supported service just do something like this as a last resort to just leave a link to the image:

###Description
A open source player.

### Screenshot
#[Screenshot](http://i.imgur.com/dNYswmI.gif)


回答4:

Although the code below shows you how to reference the image link in the Github README.md, you just can't copy the URL from your browser's address bar: you must right-click image and choose Copy Image Location

![Description of image being displayed in Github README.md](PASTE-LINK-YOU-COPIED-HERE)

BTW, if you wanted to embed an image in a stackoverflow post, the same code would work.

I can't actually upload an image in this post due to insufficient rep points, so I'll post the IMGUR link to my illustrative image instead: https://i.imgur.com/p4wfMRQ.jpg