N
Nuxt•2mo ago
grokRespawn

Nuxt content images are not loading - Nuxt Content v3.3.0

Hi, I'm creating a blog with nuxt content but when I'm using an image in the .md file they are not loading/ Below is first-blog.md file with all options I have tried: 
---
title: "How Netflix Uses Java - JavaOne 2025"
---




![Banner for post](profile.png)
![A Cool Imeeeageqas](/public/profile.png)
![A Cool Imeeeagwwe](../../public/profile.png)
![A Cool Imeeeadasdasge]('../../public/profile.png')
![A Cool Imeeeageww](@/public/fivem-client-download-button.jpg)
![A Cool Imeeeage](~/public/fivem-client-download-button.jpg)
![A Cool Imeeeage](~/assets/images/profile.png)



Testing content
---
title: "How Netflix Uses Java - JavaOne 2025"
---




![Banner for post](profile.png)
![A Cool Imeeeageqas](/public/profile.png)
![A Cool Imeeeagwwe](../../public/profile.png)
![A Cool Imeeeadasdasge]('../../public/profile.png')
![A Cool Imeeeageww](@/public/fivem-client-download-button.jpg)
![A Cool Imeeeage](~/public/fivem-client-download-button.jpg)
![A Cool Imeeeage](~/assets/images/profile.png)



Testing content
Below my content.config.ts 
import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {

    blog: defineCollection({
      source: 'blog/*.md',
      type: 'page'
    }),
  
  }
})
import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {

    blog: defineCollection({
      source: 'blog/*.md',
      type: 'page'
    }),
  
  }
})
Below us how my [...slug].vue looks like 
<script setup>
const route = useRoute()
console.log(route.path)
const { data: page } = await useAsyncData(route.path, () => {
    // console.log('querying collection foor', route.path)
    const collection = queryCollection('blog').path(route.path).first();
    // console.log('collection', collection)
    return collection
})
</script>
<template>
    <main class="max-w-[1200px] mx-auto">
        <ContentRenderer v-if="page" :value="page" />
    </main>
</template>
<script setup>
const route = useRoute()
console.log(route.path)
const { data: page } = await useAsyncData(route.path, () => {
    // console.log('querying collection foor', route.path)
    const collection = queryCollection('blog').path(route.path).first();
    // console.log('collection', collection)
    return collection
})
</script>
<template>
    <main class="max-w-[1200px] mx-auto">
        <ContentRenderer v-if="page" :value="page" />
    </main>
</template>
Help please🙂
No description
No description
No description
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @grokRespawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue is related to how Nuxt Content and Nuxt handle static assets and image paths in Markdown files. How to Reference Images in Nuxt Content Markdown Images in Markdown files should be placed in the public/ directory and referenced with a root-relative path. For example, if you have public/profile.png, you should use: 
![Banner for post](/profile.png)
![Banner for post](/profile.png)
This will resolve to <http://localhost:3000/profile.png> and should work correctly.
Do not use ~/public/, @/public/, or relative paths like ../../public/—these will not work, as the public/ directory is served at the root URL, not as a subdirectory.
Referencing images from the assets/ directory (e.g., ~/assets/images/profile.png) will not work in Markdown, because assets/ is for build-time processing and not directly accessible at runtime via a URL. If you need to use images from assets/, you must import them in Vue components, not in Markdown files. #### Example Directory Structure 
content/
  blog/
    first-blog.md
public/
  profile.png
  fivem-client-download-button.jpg
content/
  blog/
    first-blog.md
public/
  profile.png
  fivem-client-download-button.jpg
#### Example Markdown 
![Banner for post](/profile.png)
![Another image](/fivem-client-download-button.jpg)
![Banner for post](/profile.png)
![Another image](/fivem-client-download-button.jpg)
Why Other Paths Don't Work - ![A Cool Imeeeageqas](/public/profile.png)
This tries to load /public/profile.png, which does not exist. The public/ directory is not part of the URL. - ![A Cool Imeeeagwwe](../../public/profile.png)
Relative paths like this do not resolve to the public/ directory. - ![A Cool Imeeeadasdasge]('../../public/profile.png')
Same as above, and single quotes are not standard in Markdown image syntax. - ![A Cool Imeeeageww](@/public/fivem-client-download-button.jpg)
@/ and ~/ are for imports in Vue/JS, not for URLs in Markdown. - ![A Cool Imeeeage](~/public/fivem-client-download-button.jpg)
Same as above. - ![A Cool Imeeeage](~/assets/images/profile.png)
assets/ is not publicly accessible at runtime. Official Documentation
You can add images to your public directory:
>
And then use them in your markdown files in the content directory as such:
> 
![my image](/image.png)
![my image](/image.png)
Prose Components: Images
Summary - Place images you want to use in Markdown in the public/ directory. - Reference them with a root-relative path: /image.png. - Do not use ~/, @/, or relative paths to public/ or assets/ in Markdown. If you follow this pattern, your images should load correctly in Nuxt Content v3.3.0 Docs: Markdown Images Docs: Assets. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@477643775787925515> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
grokRespawn
grokRespawnOP•2mo ago
Issue was resolved by following what kapa.ai suggested. Thank you! 🙂

Did you find this page helpful?