Adding images to a public GitLab Page

How to Use GitLab
1

I am building a plain HTML site using GitLab Pages and am trying to add a PNG image. The page is published as username.gitlab.io, but the image is not appearing.

  1. The PNG is in the folder: master/username.gitlab.io/public/img/filename.png
  2. In the Index.html file I tried adding:

img src=“https://username.gitlab.io/public/img/username.png”

but still no image appears on my GitLab Page.

This is probably a very common question, but I can’t find any documentation. Any answers / direction would be appreciated.

2

Problem solved! After multiple attempts to link the file correctly, this worked:

img src=“https://gitlab.com/username.gitlab.io/raw/master/public/img/filename.png”

Hope this helps someone else :slight_smile:

3

Hi @steve.greene,
The internal resources like images can be linked in a web page by relative URL or absolute URL.
absolute URL https://gitlab.com/username.gitlab.io/raw/master/public/img/filename.png
relative URL /img/filename.png

I strongly suggest to use relative URL, in this way your website will not be bound to the base URL working in gitlab.com or localhost for example.

You can see an example here
image https://gitlab.com/grup_promotor_sobtec/web/tree/master/2019/public/img
link https://gitlab.com/grup_promotor_sobtec/web/blob/master/2019/public/index.html#L110

1 Like