Cannot get images to appear in content and main page

support
1

I’m new to Hugo and I’m trying to create content that has images. From what I understand we’re suppose to use relative paths but I’m confused by this if my blog post directory is say /2018/09/01/title in that case if the images are located under localhost/title/images/someImage.jpg then the image won’t appear when I just go to the main index page localhost/

That being said my current configuration is:

Config.toml:

[permalinks]
post = "/:year/:month/:title/"

Then my folder structure is:

  • content
    • post
      • 2018
        • blogPostTitle
          • index.md
          • images
            • someImage.jpg

The generated output is:

/localhost/2018/09/01/blogPostTitle

But keep in mind that I can have a different “title” in the index.md file that is different then than folder name.

I’m even struggling just to get the image to appear in my blog post nevermind the main page. I got it to work once but never again. Any helped would be appreciated.

Code that I’ve tried includes:

![alt text](/images/someImage.jpg)
2

The path /images/someImage.jpg refereces an Image in the root directory of your website. Try using a relative path like images/someImage.jpg instead.

Best regards
Tobias

3

The problem is a relative path won’t work because the address of the image is different in the single page as it is in the main page. They are in different folder depths.

4

A simple approach is to put the images under static (in whatever folder). The root of static translates to the root of your site. Say you have /static/img/myimage.jpg; you could access it as /img/myimage.jpg

2 Likes
5

That’s very close to what I’ve been doing. I’ve been using the suggestion about shortcodes from this post and like you said putting the images in the static folder. Then in the code I write:

<img src="{{<baseurl>}}/images/.../myImage.jpg">

This then makes the images safe to load from both the main index page and the single page. I just wish I could use the bundling feature so that I can keep the images along with the posts but it’s not possible. To keep things sane I’m mirroring the directory structure of the posts under the static folder.

6

A bundling example is this post:

…using this shortcode:

I could also directly access the image via markdown syntax in the markdown file:

 ![Hornet](kenpei-vespa_mandarinia_japonica-1.jpg)
7

Thank you but unfortunately it’s not finding any images and thereby displaying nothing. I’ve even tried to add debugging code inside your snippet and it’s not showing anything extra. All I get is:

<figure>
        <img src="" />
</figure>
8

Did you try:

 ![alt text](images/someImage.jpg)

… without the leading slash?

2 Likes
9

Thanks, It solved my issue. :grinning:

10

A post was split to a new topic: Referencing images in static directory when site is served from subdirectory