Nuxt•4w ago

AWS Amplify and Nuxt Image not loading

Hi, I am trying to get images working on AWS amplify with SSR, but with no success. Locally everything works fine, but on deployed site, all images from public/images folder are not showing, using NuxtImg component. Anyone had a simmilar issue?

5 Replies

kapa.ai•4w ago

Hi @DaVision. 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 encountering a common issue with Nuxt Image and AWS Amplify. Here's what we can gather from the available information: 1. The issue you're experiencing is likely related to the Sharp package, which is used by Nuxt Image for image processing. This is evident from a similar problem described in this Stack Overflow post. 2. The solution involves installing the Sharp package with the correct architecture for your production environment. As mentioned in the Stack Overflow post, you need to run the following command after installing the Sharp package:

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

This command adds the necessary Linux binary files for Sharp to work in production mode. 3. Additionally, make sure that your nuxt.config.ts file includes the Nuxt Image module:

   export default defineNuxtConfig({
     // ... other configurations
     modules: ["@nuxt/image"],
   });

   export default defineNuxtConfig({
     // ... other configurations
     modules: ["@nuxt/image"],
   });

4. If you're using external URLs for images, ensure that you've whitelisted the domains in your Nuxt configuration, as described in the Nuxt Image AWS Amplify provider documentation. 5. Lastly, double-check that your images are placed in the correct directory. For the default provider, images should be stored in the public/ directory of your project. If these steps don't resolve your issue, you may need to investigate further, possibly by checking AWS Amplify-specific configurations or logs for any errors related to image processing or file access. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

DaVisionOP•4w ago

I get this kind of url in deployed site: /_amplify/image?url=%2Fcontentpaul-logo-tme-pure.webp&w=320&q=80 checking this url, I get Error loading source image @kapa.ai I get this kind of url in deployed site: /_amplify/image?url=%2Fcontentpaul-logo-tme-pure.webp&w=320&q=80 checking this url, I get Error loading source image

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the URL you've provided and the error you're encountering, it appears that you're using AWS Amplify with Nuxt Image, and there's an issue with image loading in your deployed site. Let's analyze this based on the available information: 1. The URL format /_amplify/image?url=%2Fcontentpaul-logo-tme-pure.webp&w=320&q=80 suggests that AWS Amplify is attempting to process the image using its built-in image optimization service. 2. According to the AWS Amplify provider documentation for Nuxt Image, Nuxt Image has first-class integration with AWS Amplify Hosting. This integration should be enabled by default in AWS Amplify deployments. 3. The error "Error loading source image" indicates that the image processing service is unable to access or process the original image file. To troubleshoot this issue, consider the following steps: 1. Check the image path: Ensure that the image file (in this case, paul-logo-tme-pure.webp) is actually present in your project's public/ directory. The URL suggests it should be in a content subdirectory. 2. Verify Amplify configuration: Make sure your Amplify project is correctly configured to handle static assets and server-side rendering (SSR). 3. Check Nuxt Image configuration: In your nuxt.config.ts, ensure that you have the AWS Amplify provider properly set up. Although it should be auto-detected, you might want to explicitly configure it:

   export default defineNuxtConfig({
     image: {
       provider: 'awsAmplify'
     }
   })

   export default defineNuxtConfig({
     image: {
       provider: 'awsAmplify'
     }
   })

4. Domains whitelist: If the image is coming from an external source, make sure you've whitelisted the domain in your Nuxt Image configuration:

   export default defineNuxt({
     image: {
       domains: ['your-domain.com']
     }
   })

   export default defineNuxt({
     image: {
       domains: ['your-domain.com']
     }
   })

5. Check Amplify logs: Review your AWS Amplify build and deployment logs for any errors related to image processing or file access. 6. Rebuild Sharp (if using): As mentioned in the previous answer, you might need to rebuild the Sharp package for your production environment:

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

If these steps don't resolve the issue, you may need to contact AWS Amplify support for further assistance, as the problem might be specific to their image optimization service configuration. AWS Amplify provider documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

AWS Amplify and Nuxt Image not loading

Did you find this page helpful?