HUGO

Problems displaying illustrations on GitHub pages

#1

Hi,
I’ve just uploaded my first Hugo site to GitHub pages. I have tested it first with the ./hugo server command and everything looked fine. However, now I have uploaded it, I can’t see any of the illustrations within my text. The illustrations I placed in the banners look fine.

I’ve kept the same code that was used in the Ananke file, so
{{< figure src="/images/market_dashboard.png" >}}

I know for a fact that the names and extensions are correct.
How could I improve my code?

Cheers,
Brenda

#2

Please provide a link to the live site, or to the public repository for your project.

#4

Your root of your site is:
https://brendaloznik.github.io/portfolio/

When I visit this page, the URL of the missing image is /images/bird_index.png. It should be /portfolio/images/bird_index.png.

#5

I will try to fix this, but isnt it strange then that the header images that are in the same folder do show?

#6

No, it is not strange. When I view source:

<header class="cover bg-top" style="background-image: url('https://brendaloznik.github.io/portfolio/images/bird.jpg');">

The URL for the background image is absolute.

#7

Without seeing your site configuration and layouts, I am only guessing. But I suspect that setting canonifyURLs = true in your site configuration will resolve your problem.

#8

I see now that I made a typo in my canonify code. Thank you very much for pointing that out. Adding /portfolio does indeed solve my problem.