Displaying images in GitHub documentation

Question

I have a GitHub repository, for which I have created a Wiki. In said Wiki, there are multiple pages, like this one that I tried putting images on. For some reason, those images aren't showing up.

My Markdown code to the page that I have pointed out looks like this :

# Getting started
* [Using protoype](#using-prototype)
* [Working on code](#working-on-code)
 * [Installation instructions](#installation-instructions)
 * [Front-end code](#front-end-code)
 * [Back-end code](#back-end-code)
 * [Database code](#database-code)

### Using prototype

1. Go [here](https://mikewarren.me/YALApp/test.html) for the prototype. It will take you to the login page, which should look like this: ![if you see this, it means you probably need to right-click this to open the image in a new tab](../blob/master/loginPage.png)
2. Click on blue bar labelled "Login" to select a sample profile.
3. Log in.

### Working on code

Comes in multiple parts: the installation instructions and the different layers of code. These are discussed below. When discussing the directories these are in, I shall use ~ to symbolize project root directory.

##### Installation instructions

This project is written in node.js and has a `package.json` file at ```~/home/ec2-user/GroupManagementAppServer```. You should be able to ```npm link``` the dependencies the project needs. The database connection is to a MySQL database, so I would recommend a MySQL database management system (I personally use phpMyAdmin) unless you plan on changing that to another (say, MongoDB to keep in the node.js spirit of things).

##### Front-end code

This can be accessed at ```~/var/www/html/YALApp```. JavaScript dependencies that are third-party libraries are one directory up from that. 

##### Back-end code

This is written in JavaScript, and can be accessed at ```~/home/ec2-user/GroupManagementAppServer```. Main file is `appServer.js`, and if you are intending to use SSL/TLS, you will have to spell out the pathnames of `privateKey`, `certificate`, and/or `intermediate`. The application uses port number `8080`, and `8443` for https. 

##### Database code

I don't have anything connected to the database yet, and thus had no real need to include the script here, but when I do, it will probably be in either ```~``` or ```~/home/ec2-user/GroupManagementAppServer/data```.

I don't know how else to link to the image, which can be found in the repository, besides ../blob/master/[pathToImage]. How to resolve this?

Also, should I be putting all documentation information, including pages, in one directory in that repository? It kinda feels appropriate to put it in the main directory of the code being documented — Mike Warren
– Mike Warren, Commented Jan 1, 2017 at 7:53
Yes, isolating the doc in its doc folder is also a practice seen in GitHub pages for instance: see github.com/blog/2228-simpler-github-pages-publishing — VonC
– VonC, Commented Jan 1, 2017 at 8:05

VonC · Accepted Answer · 2017-01-01 08:03:55Z

2

Try and specify the full url of your repo instead of a relative path.

See "Linking to images in a repository"

You can link to an image in a repository on GitHub by copying the URL in your browser and using that as the path to the image.
For example, embedding an image in your wiki using Markdown might look like this:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

answered Jan 1, 2017 at 8:03

VonC

1.4m569 gold badges4.8k silver badges5.7k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VonC Over a year ago

I agree, but this is what is currently and officially documented.

Collectives™ on Stack Overflow

Displaying images in GitHub documentation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related