Nuxt Content Images

[danvega]

In my current blog I have a directory structure that looks like this

/blog/2022/05/17

In that folder, I have the markdown file for the post along with any images associated with it. I'm referencing the image relatively in my markdown and it's not displaying. Is there any way to make this work? I would like to have the images associated with the blog post in the same folder.

![wes-hicks-4-EeTnaC1S4-unsplash.jpg](./images/wes-hicks-4-EeTnaC1S4-unsplash.jpg)

[ManasMadrecha]

It is possible.

Option 1: Using node's fs.cp, recursively copy the images & their folder inside Nuxt app's public folder. Then, whatever images' src you use inside markdown files, those will actually be w.r.t. public folder. Problem solved. 😄

One demerit of above option: It will copy each and every image in the Source Content folder, even if you are not using it in any markdown file.

---

A better option 2 is to use a custom remark-plugin, wherein visit all internal images used in a particular markdown file, and push all these images' src into the file.data.
Then, create a normal Nuxt plugin (any .js file), wherein fetch all the Source Content Folder's docs; for each doc, you push data.images into an array. Thus, the array will become huge, full of hundreds of images used in any doc. Then, follow the first option, i.e., fs.cp for each image of this huge array.

This way, only those images (and their folders) will be copied into the public folder, which are actually used in the markdown files.

---

Option 3: For images used with Wikilink and Absolute path (e.g., due to Obsidian or Foam extension of VS Code), only their names will be written inside the markdown files; such images won't have any path info present (if name is unique, else path info present), despite the images being present nested inside folders.
So, to copy such images, you can use fast-glob package. Using this package, scan your Source Content folder for all images and put in an array. Then, using the "array of images actually used" you got in option 2 above, filter in the "array of all images" with only images actually used. And for each image of "array of all images" (now filtered), use fs.cp similar to option 2.

[danvega]

Thanks for responding... I have way too many images to copy each of them at build time. I actually think that turning all of the images into nuxt-img might be the solution but I haven't quite figured it out yet

#1170

[ManasMadrecha]

The best thing would be to directly have all your images inside public folder. That's the ideal solution.

But since you already have the images inside many nested folders along side md files, you will have to somehow take them to public folder. Even nuxt-img will work only when you have the images inside public folder.

I tried with my Obsidian vault that has 600+ images (placed into 1000 folders anywhere) (and using fast-glob I found I am actually using only 300+ in md files), so for me it took around 10 seconds to copy them all with forEach into public folder.

This way, I don't have to change my workflow (of having images and docs side by side in whichever folders I want) just for the sake of having a website.

[danvega]

@ManasMadrecha so on your build step you do this every single time right? Because how would you know that it's the latest blog post or one you updated from a while back?