Colocate images

[dbzx10299]

I‘m not sure if there is a way to do this but it would come in handy. Say we have colocated files for our blog posts:

└── post-1/
    ├── index.md
    └── .meta/
        └── imgs/
            └── img-1.png

it would be super useful if we could reference an image in our blog like this

![my-image](./.meta/imgs/img-1.png)

[stijns96]

Also looking for something like this. I'm building a documentation and have quite some code per md file to render. Now I have to store all of this in my public folder, and that feels odd...

Already found something?

[dbzx10299]

There's two ways I have found to handle this, we can use the vite-plugin-static-copy plugin or use nitro.publicAssets.

If you have the following folder structure

.
└── content/
    └── blog/
        ├── post-1/
        │   ├── index.md
        │   └── .meta/
        │       └── imgs/
        │           └── img-1.png
        ├── post-2/
        │   ├── index.md
        │   └── .meta/
        │       └── imgs/
        │           └── img-2.png
        └── post-3.md

You can update your nuxt.config.ts to copy the assets from the .meta folder, specifically images and move them to the public folder. This runs during build first so once the files are in the public folder they will also end up in the output folder.

import { fileURLToPath } from 'node:url'
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/content'],
  vite: {
    plugins: [
      viteStaticCopy({
        targets: [
          {
            src: fileURLToPath(new URL('content/blog/**/.meta/**/*.{png,jpg}', import.meta.url)),
            dest: fileURLToPath(new URL('public/imgs', import.meta.url))
          }
        ]
      })
    ]
  }
})

This will output

.
└── public/
    └── imgs/
        ├── img-1.png
        └── img2.png

and you can reference the files like this in the markdown file

# post 1

![some image](/imgs/img-1.png)

The other method is to statically serve the assets with nitro.

import fg from 'fast-glob'
import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/content'],
  hooks: {
    async 'nitro:config'(nitroConfig) {
      const dirs = await fg('content/blog/**/.meta/imgs/**', {
        dot: true,
        onlyDirectories: true
      })

      for (const dir of dirs) {
        nitroConfig.publicAssets?.push({
          baseURL: '/',
          dir: fileURLToPath(new URL(dir, import.meta.url)),
          maxAge: 60 * 60 * 24 * 7
        })
      }
    }
  }
})

You can then reference the images in the markdown file as:

# first post

![some image](/image-1.png)

If you wanted to change it so that you reference an image as ![some image](/imgs/image-1.png) you would just have to change baseURL in nuxt config

import fg from 'fast-glob'
import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/content'],
  hooks: {
    async 'nitro:config'(nitroConfig) {
      const dirs = await fg('content/blog/**/.meta/imgs/**', {
        dot: true,
        onlyDirectories: true
      })

      for (const dir of dirs) {
        nitroConfig.publicAssets?.push({
-         baseURL: '/',
+         baseURL: '/imgs',
          dir: fileURLToPath(new URL(dir, import.meta.url)),
          maxAge: 60 * 60 * 24 * 7
        })
      }
    }
  }
})