Recommended steps for viewing image file in Github gist are not working

Question

I have a secret Github gist with a markdown document. I've created three simple .png images that need to be embedded in the document as it displays at the gist URL.

I cloned my gist repo, added the image files, and pushed to master. Now, at the gist URL, I see the image files in addition to the markdown file.

However, whenever I add the following simple code to try to display the image, it does not work (it merely hyperlinks the text "Image" and if clicked, takes me to a page that says "not found" even though I can verify it is exactly the URL address that links to the image file):

![Image:](https://gist.github.com/my_username/3998173298588e8dc9d3#file-file_name-png)

However, in my local copy of the markdown document, if I make the image links refer to relative file paths (such as ![Image:](file_name.png)) then it works just as expected if I view the document in a markdown viewer such as Mou on my local machine. It still does not work at the gist URL, regardless of local vs. github-based URLs.

From everything I've read, this appears to be the correct way to add an image to a gist (clone the gist repo, add files, push to master, then link them from their resultant Github URLs).

It's not working ... what step am I missing?

Answer 1

Easiest way to do this is to paste your image in a gist comment and pull the provided url.

The link will be static and won't reflect any changes made to the image in the gist but you also won't need to go through imgur

Answer 2

See this answer for more information, but the short answer is that it just doesn't work in gists :/.

If you look at the source for this gist post, all of the embedded images are actually hosted on imgur, even though the images are also attached to the gist.

Answer 3

A bit late to the party, but I recently was faced with similar requirements that led to a solution that I feel is appropriate to post as an answer for future reference here. Specifically, this answer directly addresses one of the OP's requirements as stated in his comment to @Jared Forsyth's answer:

...the gist is related to work that must remain in source control for my company. With my work GitHub credentials, it's no problem to store everything in a gist-based repo and share links, but it would be a problem to host the images anywhere else.

First, the reason why

![Image:](https://gist.github.com/my_username/3998173298588e8dc9d3#file-file_name-png)

does not work is because this is a fragment URL to the section of the gist web page displaying the file_name.png file and NOT the URL to the file_name.png file in the gist repository. The following solution is based on insights gained from RemarkableMark's blog on How to add an image to a GitHub gist. Furthermore, the solution is based on three observations concerning gists:

1. A gist is a git repository
2. From RemarkableMark's blog, the URL to a file (any file and not just image files) in the gist repository is of the form: https://gist.github.com/<github-username>/<gist-hash>/raw/<commit-hash>/<filename> where <commit-hash> is the SHA-1 hash identifying a specific commit.
3. The gist web page displays files from the latest commit on master in the gist repository.

These observations suggests a solution where one adds images, embeds images in the markdown, and removes images in separate commits so that one can embed the images referencing them by the SHA-1 hash of the commit that added them and remove these images in a following commit so that they are not separately displayed as additional files in the gist. This solution can be implemented with the following workflow:

Step 1: Create a gist with a markdown file

See, for example, the instructions here

Step 2: Clone the gist to a local directory

For example, cloning to the my_gist directory using HTTPS:

git clone https://gist.github.com/<gist-hash>.git my_gist

Step 3: Add all image files and commit

cd my_gist
git add file_name.png
git commit -m "added all image files"

Here, for example, only the OP's file_name.png is added, but one should add all image files to be embedded in the markdown in one commit.

Step 4: Retrieve the commit SHA-1 hash

git log -1

This outputs the log from the last commit, which is something like:

commit b032e496495cf598a0aae1c6d33e761954e57604 (HEAD -> master)
Author: ########### <###############@users.noreply.github.com>
Date:   Mon Oct 15 21:24:01 2018 -0400

    added all image files

from which the commit SHA-1 hash can be retrieved (i.e., b032e496495cf598a0aae1c6d33e761954e57604)

Step 5: Edit the markdown to embed the images and commit

Edit the markdown file to embed the images using the retrieved commit SHA-1 hash in place of <commit-hash> in the URL.

![Image:](https://gist.github.com/<github-username>/<gist-hash>/raw/<commit-hash>/file_name.png)

Again, this example only embeds the one file named file_name.png. If there are multiple images, it is best to embed them all in one step. Then, commit

git commit -a -m "embedded images in markdown"

Step 6: Remove all image files and commit

git rm file_name.png
git commit -m "removed all image files"

Again, this example has only one image file named file_name.png. If there are multiple images, it is best to remove them all in the same commit.

Step 7: Push commits

git push origin master

Notes:

1. AFAIK, one cannot add or remove image files through the gist web interface, and therefore the need to work with the repository directly by cloning it. This appears to be a design decision on the part of github.com, possibly to discourage the use of gists as a medium for posting media.
2. Step 6 is only needed so that the image file(s) themselves do not show up in the gist web page.
3. The second commit, Step 5, contains both the markdown with the images embedded and the image files. This may be viewed as a feature of this solution because this commit can be released as a markdown document package separate from the gist.
4. The last two commits, Steps 5 and 6, can be combined into a single commit if one does not care to maintain a separate commit containing both the markdown with the images embedded and the associated image files.