images from s3 bucket not loading without Next/Image loader tweaks

[MrBzik]

Summary

Hi, I am working on next js + payload project, I connect s3 bucket as so:
s3Storage({ collections: { media: true }, bucket: process.env.S3_BUCKET || "", config: { credentials: { accessKeyId: process.env.S3_ACCESS_KEY_ID || '', secretAccessKey: process.env.S3_SECRET || '', }, region: "auto", endpoint: process.env.S3_ENDPOINT, } })
Although I can upload images correctly via payload's admin panel, those images do not load on the webiste.

I have to tweak the Image loader as so:
<Image alt={prod?.name} fill loader={(url) => { return url.src }} src={prod.image?.url || "/placeholder.png"} className="object-cover"/>
But I guess it will have implications that I lose some optimizations for the images. What is correct way of handling image urls from s3 bucket?

Additional information

No response

Example

No response

[icyJoseph]

I guess the issue you are getting is that the next/image doesn't want to load because of non-configured host, or something like that?

[MrBzik]

It might be the case. You refer to NextConfig in next.config.ts file?

[icyJoseph]

Yes. Is there a repository to look at?

[MrBzik]

@icyJoseph I did not touch configuration. It looks like this:

const nextConfig: NextConfig = {
  /* config options here */
};

export default withPayload(nextConfig);

So I am not sure my repo will be of help
https://github.com/MrBzik/Oformi-online

I also tried vercel storage blob. Images from there load in most cases, but on certain window sizes it fails to load. And custom loader does not fix it. My configuration is standard:

   vercelBlobStorage({
      enabled: true,
      collections: {
        media: true
      },
      token: process.env.BLOB_READ_WRITE_TOKEN
    })