I am using the generated UI components that come standard with the Figma-UI library premade by Amplify. Specifically, a card called ProductCard
has product information with an image attached. When configuring the component in the Amplify Studio, I want to attach a static photo as the source of the picture. What are some ways to go about this?
I have the SVG on my local machine and normal react development would bundle the SVG into the code. Should I put the local development path in the src? Should I upload the SVG to the public bucket and point the src to that URL? Can I override the card's child props so I can make its src from the local development?
<Image
width="154px"
height="63px"
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
shrink="0"
position="relative"
padding="0px 0px 0px 0px"
objectFit="cover"
src="https://tmtamplifyapp-storage-c3cc73b4102934-dev.s3.amazonaws.com/public/tmt-logo.png"
onClick={() => {
mptOneOnClick();
}}
{...getOverrideProps(overrides, "mpt 1")}
></Image>
Then in the generated code, there is a part for overrides props. I want to keep the connection with the components' UI for future usage.