Having trouble with image paths
mrtunes opened this issue · comments
Oh I worked as hard as I could to figure this out but it looks like a lot of the starter sites don't really have images in the posts so it was difficult to reverse engineer what to do here.
it seems as if adding this line to the config will help copy the images folder into the output
eleventyConfig.addPassthroughCopy( 'src/images');
however, if I have an image in this folder
src/posts/mypostname
and i reference the image in a template file like this:
<img src="images/{{ image }}" width="300px" />
with frontmatter like this:
image: beneath.jpg
then when the site gets built it will have trouble finding the image because it's looking in localhost/posts/mypostname/images/beneath.jpg
yet the image is really sitting in localhost/images/beneath.jpg
this is my best understanding of the problem. i can imagine that the way i referenced this in the template file could be part of the issue as well. i have also tried a few variations of addPassthroughCopy to no avail.
You want https://www.11ty.dev/docs/copy/#change-the-output-directory and your target will be images
Ok I think that helps me figure out how to ensure that the images were copied over properly, I guess what I seem to be stuck with now is how to reference an image in your template and/or md files and make sure that the right path gets outputted?
i think i've pointed this in the right direction.
this reference:
<img src="images/{{ image }}" width="300px" />
should have a slash in front of it:
<img src="/images/{{ image }}" width="300px" />