Amplify-js: how can we style/scale the image displayed by <S3Image> component for React ?

[SogoGolf]

At the moment when I add the component with the following props:
<S3Image imgKey={"somekey"} picker />

--> the image is displayed "as-is" (which can be MASSIVE in scale if image is large) and setting a style prop on the S3Image component didn't seem to do anything. Nor did nesting the S3Image component inside a <div> and setting a style on that div.

How can we scale / resize the displayed image for this component ? Is there a different prop ?

Also why is nothing displayed in the large rectangle that houses the camera icon ? Is a massive waste of space/screen real estate. My suggestion is to let the user HIDE both the title section and that camera section via props. Then you'd have a nice clean display with a button to select, and a preview image that can be styled (per above; plus, perhaps set border radius to make into circle etc)

[RobertBrewitz]

Looks like style is supported for the S3Image component.

Assigned from props here: https://github.com/aws-amplify/amplify-js/blob/7e07ebe66e9957c01c4d1fee190b48a2f33fff89/packages/aws-amplify-react/src/Storage/S3Image.js#L142

Assigned to photoStyle here "with highest priority": https://github.com/aws-amplify/amplify-js/blob/7e07ebe66e9957c01c4d1fee190b48a2f33fff89/packages/aws-amplify-react/src/Storage/S3Image.js#L155

Rendered here: https://github.com/aws-amplify/amplify-js/blob/7e07ebe66e9957c01c4d1fee190b48a2f33fff89/packages/aws-amplify-react/src/Storage/S3Image.js#L158

[RobertBrewitz]

Here's the actual img style prop: https://github.com/aws-amplify/amplify-js/blob/7e07ebe66e9957c01c4d1fee190b48a2f33fff89/packages/aws-amplify-react/src/Storage/S3Image.js#L131

So probably <S3Image theme={{ photoImg: { width: '300px', height: '300px' } }} />

theme.photo seems to be the wrapper div styles around img
theme.photoImg seems to be the img styles
style overrides theme.photo

[jordanranz]

Hey @RobertBrewitz,

Thanks for the feedback. This should be cleaned up and more user-friendly.

Did setting the theme style for photoImg work for resizing the image?

[Knowledge91]

@jordanranz for me it is not working at all.

I also tried to use styled-components, which do not seem to work neither

[jeremysandor]

Thank you for diving in @RobertBrewitz

<S3Image theme={{ photoImg: { width: '300px', height: '300px' } }} />

did the trick

[michaelcuneo]

I know this is a really old post... but further to this... how would I manipulate the image further, i.e. ... Add &:before, or &:hover to the image, when it's written in this object format instead of a string literal?

<S3Image
  theme={{
    photoImg: {
      width: '100%',
      objectFit: 'cover',
      borderRadius: '50%',

      &:hover: {
         WebkitFilter: 'grayscale(100%);',
         filter: 'grayscale(100%)',
      }
    }
  }}
/>

[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:

https://github.com/aws-amplify/amplify-js/issues/3279

[Bulletninja]

Sorry to hijack the thread (let me know if this is irrelevant or if i should post this somewhere else) but i was doing this course on amplify with react and i got stuck. After a couple of days i isolated the problem to S3Image.
This is the way i'm using it:

<S3Image
  imgKey={product.file.key}
  theme={{
    photoImg: { maxWidth: "100%", maxHeight: "100%" }
  }}
/>

I checked product.file.key and it returns a valid key. So, i don't know what i'm missing because i get this error:

I can give more context (everything seems to be in the right places, basically), but i don't want to spam the thread. Any idea is appreciated.

EDIT (fixed): Nevermind, i found my mistake, which i'll leave here as reference, i was doing this:

import { S3Image } from "aws-amplify";

instead of

import { S3Image } from "aws-amplify-react";

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.