Next.js Image Component Not Displaying on Desktop View After Deployment

34 views Asked by At

I'm experiencing an issue with the Next.js component in my application. It works as expected locally and displays correctly on mobile devices. However, after deploying the application, the image does not display on desktop views.

Here is the component I'm using:

<Image 
    fill={true}
    sizes="(max-width: 440px) 95vw, (max-width: 1200px) 70vw, 90vw"
    src="/group.png"
    alt="picture of group"
    loading="lazy"
    priority={false} 
/>

The issue can be observed on this page: https://beta.clubbera.com/group/manga-readers

Additionally, I've noticed some function logs from Netlify that might be relevant:

Nov 24, 01:38:11 PM: 880de956 Duration: 5229.22 ms  Memory Usage: 136 MB
Nov 24, 01:38:12 PM: eec3899d Duration: 5185.04 ms  Memory Usage: 181 MB
Nov 24, 01:38:27 PM: ff2232d9 ERROR  Task timed out after 10.02 seconds
Nov 24, 01:38:27 PM: ff2232d9 Duration: 10024.38 ms  Memory Usage: 265 MB
Nov 24, 01:38:27 PM: b6721218 ERROR  Task timed out after 10.03 seconds
Nov 24, 01:38:27 PM: b6721218 Duration: 10027.48 ms  Memory Usage: 223 MB

I have checked the image path and ensured it's correct. The CSS and media queries seem to be fine. I've also tried clearing the browser cache and redeploying the application, but the problem persists.

Any insights on why this issue is occurring and how to resolve it would be greatly appreciated. Thank you!

0

There are 0 answers