Nuxt•4d ago

NuxtImg not working in development

/_ipx/... just returns 404 content page I have [...slug].vue, maybe it's causing issues How to fix? after nuxi generate everything works fine

7 Replies

kapa.ai•4d ago

Hi @envizar. 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 information provided in the knowledge sources, it appears that you're experiencing an issue with NuxtImg in development mode. This problem is likely related to the configuration of your Nuxt Image module. Here's how you can address this issue: 1. First, ensure that you have properly installed and configured the Nuxt Image module. According to the Installation guide, you should add it to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})

2. The 404 error you're seeing for /_ipx/... URLs suggests that the default image provider (ipx) is not finding your images. This could be due to incorrect image directory configuration. By default, the provider looks in the public directory. To change this, you can add the following to your nuxt.config.ts:

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

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

Replace 'assets/img' with the actual path to your images Configuration docs. 3. Your [...slug].vue file shouldn't directly cause this issue, but make sure your image paths are correct within this dynamic route. 4. If the problem persists, try clearing your Nuxt cache and node modules, then reinstall dependencies:

rm -rf node_modules .nuxt
npm install

rm -rf node_modules .nuxt
npm install

5. If everything works fine after nuxi generate, it suggests that the issue is specific to the development environment. You might want to check if there are any differences in how your images are being processed or served in development vs production. 6. Lastly, ensure that you're using the correct syntax for the NuxtImg component. Here's an example:

<NuxtImg src="/my-image.jpg" />

<NuxtImg src="/my-image.jpg" />

Replace /my-image.jpg with the correct path to your image NuxtImg docs. If these steps don't resolve your issue, you may need to provide more details about your project structure and configuration for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@515829500945367078> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

envizarOP•4d ago

@kapa.ai none of these worked

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestions didn't resolve your issue. Since the provided solutions didn't work, we may need to investigate further. However, based on the limited information in the knowledge sources, I don't have enough specific details to offer a definitive solution to your particular case. To better assist you, I would recommend the following steps: 1. Create a minimal reproduction of the issue, as suggested in the Reporting Bugs guide. This will help isolate the problem and make it easier for others to understand and potentially solve. 2. Share your reproduction and detailed description of the problem in the Nuxt GitHub Discussions. The Nuxt community is friendly and may be able to provide more tailored assistance based on your specific setup. 3. If you suspect it might be a bug in Nuxt or the Nuxt Image module, consider opening an issue on the respective GitHub repository after searching for similar existing issues. 4. Make sure you're using the latest versions of Nuxt and the Nuxt Image module, as the issue might have been resolved in a recent update. 5. If you need more immediate or professional help, you might want to consider the Nuxt Experts support mentioned in the Getting Help guide. I apologize that I couldn't provide a more specific solution. The knowledge sources don't contain enough information about your particular case to offer a definitive answer. If you can provide more details about your setup, error messages, or any other relevant information, it would be helpful in diagnosing the problem further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@515829500945367078> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Mittchel•4d ago

you can test your suspicions by check in catch-all the request path and if is ipx not return data and it will go to next handler (will be like a middleware not callback) I think ~/server/api/[...].ts

export default defineEventHandler((event) => {
  if (event.context.path !=='something') {
  return `Default foo handler`
}

})

export default defineEventHandler((event) => {
  if (event.context.path !=='something') {
  return `Default foo handler`
}

})

or thy without that file [...slug].vue The precise error message you see in the browser's console (Network tab) If possible, provide a minimal reproduction of the issue in a new Nuxt project. This would be extremely helpful for debugging.

Mittchel•4d ago

https://github.com/nuxt/ecosystem-ci/actions/runs/12953998808/job/36134961165

GitHub

nuxt-ecosystem-ci · nuxt/ecosystem-ci@85096f2

Nuxt Ecosystem CI. Contribute to nuxt/ecosystem-ci development by creating an account on GitHub.

Gaming

Programming

NuxtImg not working in development

Did you find this page helpful?