Nuxt•4d ago

IPX causing issues

Hello I have an image 428x200, its used as a logo on the site. for testing I have set the sizes="210px" however the images generated by ipx aren't returning the proper icon. instead it returns the "missing image" icon

3 Replies

kapa.ai•4d ago

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll help you troubleshoot your IPX image issue in Nuxt. There are several common reasons why IPX might be returning a "missing image" icon instead of your logo: 1. Image location: By default, IPX looks for images in the public/ directory. If your image is in another location, you need to configure the dir option.

   // nuxt.config.ts
   export default defineNuxtConfig({
     image: {
       dir: 'assets/images' // specify your image directory here
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     image: {
       dir: 'assets/images' // specify your image directory here
     }
   })

As mentioned in the Nuxt Image configuration docs, changing this from the default public directory can cause issues with some providers. 2. Image path: Make sure you're using the correct path format in your src attribute. For images in the public directory, you should use an absolute path starting with /:

   <NuxtImg src="/your-logo.png" sizes="210px" />

   <NuxtImg src="/your-logo.png" sizes="210px" />

Not:

   <NuxtImg src="_nuxt/assets/img/your-logo.png" sizes="210px" />

   <NuxtImg src="_nuxt/assets/img/your-logo.png" sizes="210px" />

3. Sharp installation: IPX uses Sharp for image processing. If you're seeing a 404 error with IPX_FILE_NOT_FOUND or a 500 error mentioning Sharp, there might be an issue with the Sharp module installation, especially in production environments. This is indicated in one of the knowledge sources where a user encountered a similar error with Sharp module installation. 4. Check file format: Ensure your image is in a supported format (JPG, PNG, GIF, etc.). If you're still having issues, you could try: - Moving your image to the public/ directory if it's not already there - Using the full path to your image - Checking your browser's developer console for specific error messages - Verifying that the image works with a regular <img> tag If you need more specific help, please provide the exact error message from your browser's console and the file path structure of your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Just SimeonOP•4d ago

Hmm even weirder is that it works on the first try but when I then hard reload it doesnt. It was caused by having this cache policy:

        '/_ipx/**': {
            cache: {
                maxAge: 60 * 60 * 24 * 7, // 7 days
                staleMaxAge: 60 * 60 * 24 * 30, // 30 days
                swr: true
            }
        },

        '/_ipx/**': {
            cache: {
                maxAge: 60 * 60 * 24 * 7, // 7 days
                staleMaxAge: 60 * 60 * 24 * 30, // 30 days
                swr: true
            }
        },

Gaming

Programming

IPX causing issues

Did you find this page helpful?