[kapa.ai] Why aren't images displayed

[bitter thistle]

Hi @quaint cove. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources, there are a few common reasons why images might not display in Nuxt, especially when using dynamic paths from the assets folder:

The Issue

When you reference images from the assets folder using string paths (like "mockup_previews/mockup_1.png"), Nuxt's build process may not properly resolve them. This is a known issue with dynamic image imports in Nuxt 3.

Solutions

1. Move Images to the public Folder (Recommended)

The simplest solution is to move your images to the public folder. According to the Stack Overflow discussion, this is the recommended approach for dynamically referenced images:

const mockups = ["/mockup_previews/mockup_1.png", "/mockup_previews/mockup_6.png"];

Place your images in public/mockup_previews/ and reference them with a leading slash.

2. Configure NuxtImg for Assets Directory

If you want to keep images in the assets folder and use <NuxtImg>, you need to configure the image module. According to the NuxtImage documentation, add this to your nuxt.config:

export default defineNuxtConfig({
  image: {
    dir: 'assets'
  }
})

Then adjust your paths:

const mockups = ["/mockup_previews/mockup_1.png", "/mockup_previews/mockup_6.png"];

3. Use Dynamic Imports (More Complex)

For assets folder images, you could use dynamic imports as mentioned in this Stack Overflow post, but this requires importing each image individually, which isn't practical for your carousel use case.

Recommendation: Move your images to the public folder and use paths starting with / - this is the most straightforward solution for your carousel implementation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: