Figures (images) Not Displaying

support
1

I have blog post at https://maxpowerwastaken.gitlab.io/model-idiot/posts/knapsack_blog/ , the hugo code of which contains a figure shortcode:

{{<figure src="/img/knapsack/Screenshot DP resource intensive.png"

link="/img/knapsack/Screenshot DP resource intensive.png"

caption="But does it scale? (no)">}}

referencing an image file in /static/img/knapsack/Screenshot DP resource intensive.png.

But the image does not show up on the site, and the link is also a dead link (just the caption shows). Inspecting the element in the browser, the html is:
<a href="/img/knapsack/Screenshot%20DP%20resource%20intensive.png"> <img src="/img/knapsack/Screenshot%20DP%20resource%20intensive.png" alt="But does it scale? (no)"> </a>

which seems to me like it should point to the image, since I can find the image in my local public directory at ~/model-idiot/public/Screenshot DP resource intensive.png. What am I doing wrong?

I know this is basic but all the other threads I’ve found on here seem to be someone included /static/ in their markdown/shortcode path, and needed to remove it, which isn’t my problem here. Any help much appreciated.

2

When I click on the link at https://maxpowerwastaken.gitlab.io/img/knapsack/Screenshot%20DP%20resource%20intensive.png, it redirects me to a login page for GitLab. I suggest visiting your site in a privacy window, so you can experience as someone not logged in.

Anyhow, that might have something to do with it.

3

Hey, this is from the other thread, but you say your repo is at https://gitlab.com/MaxPowerWasTaken/model-idiotI.

I still can’t access that, from any location or device. Always asking me to login. So regardless of your double-check, you might need to resolve that issue with GitLab before proceeding. Maybe someone else here in the forums can double check this as well: try visiting that repo while not signed into gitlab.io.

4

thanks for trying maiki. This came up last time I posted a question too. The issue is that even “public” repos on gitlab apparently are still only viewable to logged in gitlab users? That seems insane to me and I never would have thought to check that before hosting this on gitlab pages. I guess the solution is to not host a hugo site on gitlab pages? I’m torn now between continuing to try and resolve this image thing or taking a break to switch my hosting to s3 or something so I can directly control access…

5

So I found a way to get the images to show up using relative links in the shortcode:

{{<figure src="../../img/knapsack/Screenshot DP resource intensive.png"

link="../../img/knapsack/Screenshot DP resource intensive.png"

caption="But does it scale? (no)">}}

But this seems hacky, or at least not proper idiomatic Hugo. So I tried still tracking down why the previous way didn’t work.

The working shortcode (using the relative path src="../../img/knapsack/Screenshot DP resource intensive.png") yields the following URL: https://maxpowerwastaken.gitlab.io/model-idiot/img/knapsack/Screenshot%20DP%20resource%20intensive.png (accessible even in private browser)

But my original shortcode which I thought is more consistent with Hugo docs (src="/img/knapsack/Screenshot DP resource intensive.png") yield a URL without my full baseURL. It yields: https://maxpowerwastaken.gitlab.io/img/knapsack/Screenshot%20DP%20resource%20intensive.png, which is missing model-idiot part of my baseurl. That’s why it didn’t work.

To confirm my baseurl with ~/model-idiot$ head config.toml :

## Basic Configuration
baseurl = "https://maxpowerwastaken.gitlab.io/model-idiot/"
...

So my only remaining question is: why did src=/img... in the figure shortcode not yield html which captures my full baseurl?

6

I’m closing this issue. The problem is your web host, and I’m sure they have support channels, please check them out.