Images in static folder only display locally

support
1

Having searched all day for an answer to my problem and trying to work out the path for displaying images in static folder, just had to sign up here and get some support!

Using https://github.com/budparr/gohugo-theme-ananke in my subfolder of https://github.com/angkorhats/50-50

I copied the theme with git and placed it in my subfolder- “50-50”

and everything works fine. Then when I uploaded to repository on github everything was also fine

except for my images in my root folder static/images not showing up. Yet the theme featured image

shows up from themes/ananke/static and I can see the path for it is " /images/featured_image.jpg"

so I don’t know what the path for my images should be in my root folder’s “about/_index.md” file

nothing works.

I followed a hugo youtube tutorial to deploy to github where it

redirects public folder to docs folder in my config.toml to select master branch docs folder on github

then remove public folder…I wonder if that has confused things(?)
I
t is only been two days since I first installed Hugo or created a repos on github.

Please can someone tell me what I need to do to display images in my index and about pages?

Thanks in advance.

2

Can you please link to your git repository - and read up on how to ask for help, that way we’ll be able to give you better advice.

3

no images showing except theme featured bg.

4

Have a look at your about page

When you use the {{< figure >}} shortcode, you should use src="/images/hatman.jpg" instead of linking to relative directories.

5

Sorry I have a disability and cannot easily follow your procedure for asking questions.

6

Oh no that was just my trying different paths to see what would work. Nothing worked. I just haven’t changed back to reflect my local dir where it is just /images/hatman.jpg SORRY

7

Looking at the output, the issue is that the figure shortcode creates this html


which doesn’t work because your site is hosted in a subdirectory. What you need it to say is <img src="/50-50/images/hatman.jpg"> or <img src="https://angkorhats.github.io/50-50/images/hatman.jpg">

I think if you include the setting canonifyURLs=true in your config.toml it should convert all relative URLs (such as from your figure shortcode) to absolute URLs, using the value from baseURL.

You can read up more about the configuration settings here.

8

Thanks but I did try both the subdir path and absolute url and neither works.

However , I have not tried setting the canonifyURLs to true! I will try

that tomorrow and report back.

9

Now I have tried all of the above and nothing works.

The only documentation I can find is about two separate language folders in static but
nothing regarding my problem here.

It is hard to believe no-one else had had the same problem I am having and that there isn’t a simple solution. I understand paths very well but this I cannot comprehend.

10

Yes - this is new to me to as none of my sites are hosted in a subdirectory.

I found something interesting by searching the forum

So I think you need to have in config.toml

canonifyURLs = true
relativeURLs = true

And then rebuild your site.

I think this will mean that the resulting HTML for your images will be something like

<figure>
    
        <img src="../images/hatman.jpg" />

which will do the trick.

I can see that in your last push to GitHub you’ve decided to put the full URL for images. That will work, but will mean your site isn’t transferable, and also will limit some of the nice things you can do with transforming images in the more recent versions of Hugo. And, to me, makes the markdown files more cluttered.

11

What is so strange is that i rebuilt the site locally and removed the code
canonifyURLs = true

in config.toml

Then as you notice I gave absolute URL in the about section but I gave relative url “/images/bus.jpg”

in the index of post section and BOTH work…I have no idea why!

If I don’t understand why I do not know how to replicate. As it is I do not know how to make one change so have to keep deleting entire repository then create anew.

Now I have a new problem with dates of theme which I must try and search for an answer.

Thanks very much for your help funkydan2 , I guess this is an ongoing process and a matter

of trial and error until the most consistent fix is found.

PS: I do not know any other way than creating a subfolder! seems to be only option but that is something else I am sure I can find out from reading documentation.

12

Very happy to help.

Is this a question about how to use git? Or do you need to delete the docs folder each time before you build?

13

Yes, you are right, It is a question about git. I don’t delete docs folder each time, I delete public folder.

I need to really follow the HUGO and GITHUB official documentation because I am pretty sure the reason why the images weren’t showing up was because I did not deploy properly! I copy and pasted
the code from GITHUB example code when I re created the repos and all of a sudden the images worked!