Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

404 error loading product images #149

Open
michelediss opened this issue Apr 10, 2024 · 4 comments
Open

404 error loading product images #149

michelediss opened this issue Apr 10, 2024 · 4 comments

Comments

@michelediss
Copy link

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
Copy link

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
Copy link
Owner

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
Copy link

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&amp;h=300&amp;nf_resize=inside" and more...

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

@ShramkoO
Copy link

<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"
   ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants