Folders inside /src/posts/img/ ?

[TedGoas]

Hi, thanks so much for providing this starter template! I'm using it to rebuild my personal site, which includes a blog. Some of my blog posts contain a bunch of images, so I typically put them into a their own folder to keep the root image directory clean.

However I notice that images inside a folder inside /src/posts/img/ can't be loaded.

Eg. if I reference a thumb in front matter like thumb: "image.svg" it displays, but if I put it into a folder inside /img/ and reference it like thumb: "folder/image.svg" it cannot be displayed.

The strange thing is that the image path created appears to be correct:

In this case ^^ there is an image located at /assets/img/google-doc/hero.svg, but it won't display because it's in a folder called google-doc. If I move the image to the img root, it's displayed at /assets/img/hero.svg.

I'm experiencing the same when referencing images in markdown. Eg:

<img src="/assets/img/folder/image.svg"> // Doesn't display ❌
<img src="/assets/img/image.svg"> // Does display ✅

Any idea what's going on here? Is there something I could add that allows the site to display images in folders?

Many thanks in advance!

[daflh]

Sorry, can you explain what do you expect and what happens instead?

[TedGoas]

Sorry, I expect the image to display in a browser:

---

Instead the image does not load even though the path seems to be correct

Does that make sense?

[daflh]

Where is the folder you store the image? And what is in the thumb frontmatter? In case you don't know, all images inside /src/posts/img and /src/assets/img are copied to /dist/assets/img by using addPassthroughCopy in the Eleventy config file. So the thumb frontmatter is referencing file relative to that folder, you can change this behavior by changing this line.

[TedGoas]

Oh yea, those seem like the places to update this! Though I'm a bit of a JS novice, do you know how I would update those statements to preserve the subdirectory name of any subdirectory present?

[daflh]

Oh, it seems I misinterpret your question earlier. Yeah, nevermind.

So if you want to preserve the subdirectory when Eleventy copy the folder, just change these lines with this:

config.addPassthroughCopy('src/assets/img/');
config.addPassthroughCopy({ 'src/posts/img/': 'assets/img/' });

[TedGoas]

Hey thanks so much, that did it! 🎉 Really appreciate your help!