Cannot display image in my post

Hey,

I Have question about the insertion of image in post by hugo.
In fact I put the image in the folder static/img, and in the .md file I want to refer to this image,

whoever when I run the server in my local PC the image doesn’t appear.

Does anyone know the solution of this problem ?

Thank you for helping

best regards

How are you inserting the image into the .md file? Can you share your code?

You may want to check the file location referenced in the .md file. Whilst the image is in static/img/ you only need to reference with the img directory: /img/yourfilename.jpg

Thank you for your response,
this is an example of the used file .md. I put the Image in /static/img as png format

# Project title.
title = "XXXXXXXX"

# Project summary to display on homepage.
summary = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Optional image to display on homepage (relative to `static/img/` folder).
image_preview = "portrait.jpg"

# Tags: can be used for filtering projects.
# Example: `tags = ["machine-learning", "deep-learning"]`


# Optional external URL for project (replaces project detail page).
#external_link = "https://translate.google.com.tn/?hl=fr"

# Does the project detail page use math formatting?
math = false

Optional featured image (relative to `static/img/` folder).
[header]
#image = "headers/portrait.jpg"


+++

Lorem ipsum *dolor sit amet,* consectetur adipiscing elit. ![Example](/img/clim.png) Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida.

Nullam vel molestie justo. Curabitur vitae efficitur leo. In hac habitasse platea dictumst. Sed pulvinar mauris dui, eget varius purus congue ac. Nulla euismod, lorem vel elementum dapibus, nunc justo porta mi, sed tempus est est vel tellus. Nam et enim eleifend, laoreet sem sit amet, elementum sem. Morbi ut leo congue, maximus velit ut, finibus arcu. In et libero cursus, rutrum risus non, molestie leo. Nullam congue quam et volutpat malesuada. Sed risus tortor, pulvinar et dictum nec, sodales non mi. Phasellus lacinia commodo laoreet. Nam mollis, erat in feugiat consectetur, purus eros egestas tellus, in auctor urna odio at nibh. Mauris imperdiet nisi ac magna convallis, at rhoncus ligula cursus.

Cras aliquam rhoncus ipsum, in hendrerit nunc mattis vitae. Duis vitae efficitur metus, ac tempus leo. Cras nec fringilla lacus. Quisque sit amet risus at ipsum pharetra commodo. Sed aliquam mauris at consequat eleifend. Praesent porta, augue sed viverra bibendum, neque ante euismod ante, in vehicula justo lorem ac eros. Suspendisse augue libero, venenatis eget tincidunt ut, malesuada at lorem. Donec vitae bibendum arcu. Aenean maximus nulla non pretium iaculis. Quisque imperdiet, nulla in pulvinar aliquet, velit quam ultrices quam, sit amet fringilla leo sem vel nunc. Mauris in lacinia lacus.

Suspendisse a tincidunt lacus. Curabitur at urna sagittis, dictum ante sit amet, euismod magna. Sed rutrum massa id tortor commodo, vitae elementum turpis tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus turpis, venenatis a ullamcorper nec, tincidunt et massa. Integer posuere quam rutrum arcu vehicula imperdiet. Mauris ullamcorper quam vitae purus congue, quis euismod magna eleifend. Vestibulum semper vel augue eget tincidunt. Fusce eget justo sodales, dapibus odio eu, ultrices lorem. Duis condimentum lorem id eros commodo, in facilisis mauris scelerisque. Morbi sed auctor leo. Nullam volutpat a lacus quis pharetra. Nulla congue rutrum magna a ornare.

Aliquam in turpis accumsan, malesuada nibh ut, hendrerit justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sed erat nec justo posuere suscipit. Donec ut efficitur arcu, in malesuada neque. Nunc dignissim nisl massa, id vulputate nunc pretium nec. Quisque eget urna in risus suscipit ultricies. Pellentesque odio odio, tincidunt in eleifend sed, posuere a diam. Nam gravida nisl convallis semper elementum. Morbi vitae felis faucibus, vulputate orci placerat, aliquet nisi. Aliquam erat volutpat. Maecenas sagittis pulvinar purus, sed porta quam laoreet at.

Do you have a github repo of your site? You have added the markdown correctly for the image, so not sure why it doesn’t show. Have you capitalized any part of the filename?

Not much more I can do without seeing the full repo I am afraid.

If you use the --verbose flag when you run hugo server you might see errors that can give you hints.

A couple of points -

  • the toml has a couple lines that start with “Optional…”, that should probably be commented out.
  • given /static/img/clim.png, the ![Example](/img/clim.png) should indeed work. As @Jonathan_Griffin said, check capitalization, or spelling etc.

Thank you for your reply.
But actually I notice that when the format of the image is *.jpg there is no problem. the problem is when I use the *.png format.

By the way thank you for your help.
Best regards

Ok, just tested the same thing with a png image, and it works with no trouble.

Just in case, I forgot the trailing ) on ![Example](/img/clim.png) when I wrote the above.

The way I went about checking images I looked at the image code in the html in the generated /public folder. More often than not it was just the path spelled wrong way, maybe extension in wrong case or something like that. To test I also experimented with absolute URLs and relative - to locate where /static appears in herarchy. In my case I found it was the root folder so I put all images under static/img.

Also, make sure your png is not called “filename.png.png”. This has happened to me before.