404 error loading product images

michelediss commented 3 months ago

Description

I am encountering an issue where images from an external domain (admin.mydomain.com) are not loading on my Nuxt site hosted on Netlify (mydomain.com). The images themselves are accessible when visited directly via their URLs. However, when they are requested through the Nuxt Image module (@nuxt/image using ipx as a provider), they return a 404 error. This issue persists despite the external domain being correctly listed in the NUXT_IMAGE_DOMAINS environment variable.

Expected Behavior

Images from the external domain specified in NUXT_IMAGE_DOMAINS should load without issues, with @nuxt/image correctly processing and displaying them on the site.

Actual Behavior

Requests to load images through @nuxt/image are failing with a 404 error, indicating that the image could not be found or processed by ipx.

Additional Context

Direct access to the image URLs works as expected, indicating that the images are indeed accessible.
CORS settings have been verified, and appropriate headers are set to allow requests from the Netlify domain.

Frontend Hosting environment: Netlify WordPress Hosting environment: Hostinger

trinity-watanabe commented 3 months ago

Hi I am having the same problem and have looked into it,

There seem to be a lot of potential problems with NuxtImg and adding error handling might be a good way to go. https://github.com/nuxt/image/issues?q=is%3Aissue+netlify+ipx

scottyzen commented 3 months ago

Hi guys.

I actually think this is a bug with Netlify! It's frustrating not having control to fix it. Even loading previous versions of WooNuxt are having the same problem with images not working.

I'm hoping to hear something that might help here: Netlify CDN Image 404 - Nuxt

This is what I think is the problem https://answers.netlify.com/t/netlify-cdn-image-404-nuxt/116256/8?u=scottyzen

trinity-watanabe commented 3 months ago

Hello.

I have tried using the netlify Image CDN for this problem and have successfully displayed it.

Changes

netlify.toml

Image remote_images = ["https://wordpresssite.com/. *"]

Components/CategoryCard.vue

const imageSrc = '.netlify/images?url=' + node.image?.sourceUrl || '/images/placeholder.jpg';.

<NuxtImg :src="imageSrc" and more...

Output

<img src="/.netlify/images?url=https://wordpresssite.com/wp-content/uploads/example.jpg?w=250&h=300&nf_resize=inside" and more...

doc

https://docs.netlify.com/image-cdn/overview/

ShramkoO commented 2 months ago

<NuxtImg
      :width="imageWidth"
      :height="ImageHeight"
      class="absolute inset-0 object-cover w-full h-full"
      :src="'.netlify/images?url=' + node.image?.sourceUrl || fallbackImage".  /// here
      :alt="node.image?.altText || node.name"
   ...

scottyzen / woonuxt