javascriptnext.jsdigital-oceannextjs-image

NextJs Image Component Not Getting Served On Digital Ocean Deployed App


so i have a NextJs Project and I use NextJs Image Component for some images, when i build the project and run it locally everything works fine. But now i just deployed my project on digital Ocean and all the images that i'm using Next-Image-Component to serve isn't working.

I get this error Network Tab error

I have tried importing the images using "relative path" and i have also tried importing the images with "absolute path"-"module import" but that didn't change anything.

I have also Deployed this same project on vercel just to check if it was something in my code and everything works fine on vercel. I know i can just keep it deployed on vercel but my team wants the project deployed on Digital ocean. I have contacted their support team and haven't gotten a response in days now.

Note Images that are served with the traditional img tag and images served with MUI avatar component are working fine.

Please has anyone encountered this issue or have any idea on how i could solve this on Digital Ocean


Solution

  • So for anybody that's having this same issue i was able to solve this by installing "sharp" package for my production app which was recommended by NextJs,Here

    Vercel handles installing this for you that's it seemed to work on vercel. Hope this helps somebody else