Images display on homepage using _index.md file but not on posts

Hi everyone! I’m making my first hugo site using the theme Nostyleplease! So far, my images have been loading fine. When I go under theme and edit the _index.md using the format to display images, everything works fine. But when I go into a post and use the same syntax, the images won’t display. Any advice?

Show your code, preferably a link to your repository. Without that, nobody can know what “same syntax” means.

1 Like

Here’s the repository. Although when I look in the files in the repository the image syntax isn’t there even though they still show on the website?
Here are images of my code for the respective files:

If you visit the website, poems4u.net, you’ll see the images fine on the homepage but then if you go to “Art-Criticism” and on to “Warhol’s Many Maos,” you’ll see there are no images.

Sorry for so many words; I’m still new to this. Thanks so much for your help!

second screenshot cuz it was being goofy

You shouldn’t have a content directory under themes. Please read the Hugo documentation here.

In addition, you can’t have an _index.md file and another MD file in the same folder. Please read the Hugo documentation here.

And content/art criticism/artcrit1.md doesn’t contain a single image, so it is to be expected that the rendered HTML doesn’t contain an image.

Finally, you should not include public in your Github repo – that directory contains your web site, there’s no point in putting it under Github control.

1 Like

I attempted to remove the ‘content’ folder from ‘themes’ but then the site wouldn’t launch for some reason, so I kept ‘content’ with just ‘_index.md’ (see screenshot)

I have changed the main ‘content’ directory. Now all MD posts are in a separate folder from their respective ‘_index.md’

Well yes, there were no images in ‘content/art criticism/artcrit1.md’
That wasn’t the post I was talking about, it has been deleted.
Please see ‘content/art criticism/posts/maos.md’ to see what I’m talking about wrt images not rendering.

I don’t know how to do the last one…

thanks :slight_smile:

Okay so I did some digging in inspect element and for some reason hugo is trying to render these images from the markdown file itself and not from where they actually are in the directory.


Any ideas on how to fix this specifically?

I suggest that you start over, and start simple. Perhaps with the “Quick start guide”. Read the documentation (which is sometimes a bit difficult to grasp).

As to

: Hugo does exactly what you tell it to do. You use [](ra.jpg), which translates to
<img src="ra.jpg">. That’s what happens with any markdown processor. But you store all your images in static/images – how would Hugo know that or divine it?

If you look at your public directory (which you should really remove from Github!), you’ll see that all your images are stored under … well images. So, if you prepend that to the name of the image (and make sure that it’s an absolute URL!), you’ll see the images.

Nevertheless, you should still start over with something simple to get a grasp of the basic concepts. There’s no point in trying to build a complex site without having understood the foundations.

1 Like

You are probably right that I should restart, but your advice in tandem with me playing around with where the images are housed has gotten it to work! I will continue on with my hubris, but I thank you for your time and for listening to my nonsense. Do you have a tip jar or anything?

Wrt the public directory, is it sufficient to delete this from the repository each time I run a server?

Mmh, i cannot see any build action in your repo… so that depends where and how you deploy - if you are that far already.

If you build and publish using a github action @chrillek is right. If not…it depends.

Add it to .gitignore and delete it from GitHub. That should suffice.

Just set some hearts. And mark @chrillek s post as solution

:slight_smile:

1 Like