2

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

TimCrooker
  • 101
  • 1
  • 5
  • What do the browser tools say? Are you getting, for example, a 404 error? It's a bit unclear what the URL parameter is as S3 will not be able to interpret that. – stdunbar Mar 31 '22 at 16:42
  • each image has a 404 error – TimCrooker Mar 31 '22 at 17:47
  • any difference between the image url in production and the image url in dev? – MarkoCen Mar 31 '22 at 22:43
  • No difference at all – TimCrooker Apr 01 '22 at 22:08
  • When using `` why is the image's URL prefixed with ``? Aren't the images hosted in an S3 bucket? Shouldn't the image's URL format be `/static/images/showcase/view-portfolio.svg`? – juliomalves Apr 02 '22 at 13:17
  • 1
    You would think using common sense that this would be the case yes. I am not sure why the get requests are appending the domain name before the image URLs. Thats what I'm trying to figure out. I wouldn't think that nextJS would even alter the regular `` tags at all. – TimCrooker Apr 02 '22 at 19:34

1 Answers1

0

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.

TimCrooker
  • 101
  • 1
  • 5