11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

Home Page:https://www.11ty.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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" />