I have a blog over at https://finn.lesueur.nz and I have a series of posts there. My latest post (https://finn.lesueur.nz/posts/craigieburn-forest-park/) has an image in it using the code:
![Jen at Helicopter Hill](helicopter-hill.jpg)
and the image is stored in the leaf bundle (I think that’s the right terminology).
When I view the post at the URL above, the image works properly. The problem is that I display my latest post on my home page (https://finn.lesueur.nz) and there the image URL gives a 404 because the image is relative to the current URL.
https://finn.lesueur.nz/posts/craigieburn-forest-park/helicopter-hill.jpg vs https://finn.lesueur.nz/helicopter-hill.jpg.
How do I avoid/rectify this problem?
I think it’s normal because when you’re on the article, the link refers directly at the image into same folder.
Your HTML Code:
<p><img src="helicopter-hill.jpg" alt="Jen at Helicopter Hill" /></p>
When this article is view on homepage, it refers at the homepage and cant find the image. Image is not on the root of homepage, but into
Attempt to deplace your image into the
static/img folder, and link in your src as:
![Jen at Helicopter Hill](/img/helicopter-hill.jpg)
Normally, you will obtain good code HTML for all views!
Okay, that makes sense and I can see that will work.
If I want to use Leaf Bundles so that I can keep the images etc. of each post together, is there a good way for me to link to those assets without it breaking?
Really, I dont known, because I discorver, me too, Hugo.
Attempt to write as:
It seems that is the solution. See this other post.