Search code examples
githubgithub-flavored-markdown

GitHub README does not show external image on AWS S3


I have the following markup inside my README file.

![](https://cs-challenge.s3-ap-southeast-1.amazonaws.com/4281a2523dc3b47813316b0400549a6295a55f05.png)

HTML also does now work,

<img src="https://cs-challenge.s3-ap-southeast-1.amazonaws.com/4281a2523dc3b47813316b0400549a6295a55f05.png" />

Snowy mountains illustration Designed by Freepik

(It works on StackOverflow)

GitHub does not render the markup properly, which converts the markdown markup above into something below,

<p><a href="https://camo.githubusercontent.com/15e4c167d484297001c34549a2cc69f0ddc80704/68747470733a2f2f63732d6368616c6c656e67652e73332d61702d736f757468656173742d312e616d617a6f6e6177732e636f6d2f343238316132353233646333623437383133333136623034303035343961363239356135356630352e706e67" target="_blank"><img src="https://camo.githubusercontent.com/15e4c167d484297001c34549a2cc69f0ddc80704/68747470733a2f2f63732d6368616c6c656e67652e73332d61702d736f757468656173742d312e616d617a6f6e6177732e636f6d2f343238316132353233646333623437383133333136623034303035343961363239356135356630352e706e67" alt="" data-canonical-src="https://cs-challenge.s3-ap-southeast-1.amazonaws.com/4281a2523dc3b47813316b0400549a6295a55f05.png" style="max-width:100%;"></a></p>

enter image description here

enter image description here


Solution

  • The reason is that I did not set the Metadata for the image stored on AWS S3. All I need to do is to assign the correct metadata type to the file.

    enter image description here