Passing down className prop in S3Image component

[Hugodby]

Feature request

What is the current behavior?
In aws-amplify-react Passing className prop to S3Image components has no effect. The prop is ignored. I want to be able to set CSS class on the S3Image component.

<S3Image className="thumbnail" imgKey={props.image} />

[jnreynoso]

it is not possible to modify the sizes (width, height) of the image contained in the div.

[gabehollombe-aws]

👍 I'd like this, too.

My specific use case is that I'm using semantic-ui-react and am rendering some images captured by a webcam, with the img src passed directly to Semantic UI React's Image component. I'm rendering these images alongside existing images in an S3 bucket via aws-amplify-react's S3Image component.

My problem is that I want the S3Image images to render similarly to the Image images. To do this, I'd like to get the img tag inside the S3Image component to have 'ui image' classes on it. It would be nice if I could pass those in via a prop to S3Image.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[akasper-connyun]

Would love to have this too! The workaround with an enclosing div and img in CSS is not nice as one cannot reuse CSS classes.

[emmafass]

@ericclemmons I am trying to pass className to S3Image and I am not able to get it to recognize the className prop.

<S3Image imgKey={profilePictureKey} className="img-thumbnail" />

Does this look right to you?

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.