Storefront image loading ERROR when using Aws S3 Bucket as file storage

[ilshm]

Bug report

Describe the bug

_I am getting a Bad request INVALID_IMAGE_OPTIMIZEREQUEST on storefront if using my aws s3 bucket as file storage, managed to fix it using image loader.

How to fix ?

Just find all references to <Image in vscode, where it takes image.url as src, and add this to file:

import { ImageLoader } from 'next/image'

const contentfulImageLoader: ImageLoader = ({ src, width, quality }) => { return ${src}?w=${width}&q=${quality || 75} }

<Image loader={contentfulImageLoader} // add this line on top src={image.url} // image that takes url as argument .......

System information

Medusa version (including plugins): 1.3.21 (Latest, new project) Node.js version: v20.8.1 Database: Supabase, Redis: Upstash Operating system: Windows 10 Version 10.0.19045 Build 19045 Browser (if relevant): Chrome Version 118.0.5993.118 (Official Build) (64-bit)

Steps to reproduce the behavior

Just use the official medusa guide, on how to add aws bucket support to your medusa storefront.

Expected behavior

Images, that are loading correctly on website.

[mwondhaf]

Facing the same issue... Did you find a fix for this?

[ilshm]

I mentioned how to fix it.

[rkmcdonnell]

If anyone else is encountering this issue, I found that it was due to my failure to complete this step in the S3 integration and deploy to my storefront: https://docs.medusajs.com/plugins/file-service/s3#nextjs-starter-template-configuration.