NextJS Images hosted on AWS S3 in don't show up in production

Question

For a web app I'm developing, all of the images are stored on s3. In the development environment, everything works great and all images load just fine from the external URLs. When deployed however there is no way to load any of the images and they simply default to the alt text.

Steps Taken

• added s3 bucket base URL to the next.config.js file
• added same URL to ENV variables on the deployed instance
• deployed to digital ocean and netlify only to see the name issue
• tried using just regular <img> tags
• tried using next/image optimized images

All attempts have the same result and the console logs the following error for each image:

This error is for <Image /> components:

GET <vercel_url>/_next/image?url=https%3A%2F<bucket_base_url>%2Fstatic%2Fimages%2Fshowcase%2Fdashboard-desktop.svg&w=3840&q=75 404

This error is for <img /> components:

GET <vercel_url>/<bucket_base_url>/static/images/showcase/view-portfolio.svg 404

I'm not sure what to do I've spent crazy numbers of hours trying to solve this issue

Answer 1

The issue was that I'm an idiot and I was using a URL generation function that spits out windows formatted paths. That's why they worked on the dev environment, because windows normalized the paths to a real URL.