0

I need to create a component that will handle the styles(height, width, position) and props(src and url) for future purposes, so it has some default styles of the images so that they can can be used few times later on.

I will se styled components for the styles, but i need some help with the components itself.

So far I have props for size src and alt. My question is how the below component handle the image upload? where to put the image url for the future? Will it be enough If I put the image url(I will be using url not separate folder with images) between image divs?


import { oneOf } from "prop-types"

import * as Styled from "./Image.styled"

const Image = ({ size, src, url}) => (
    <Styled.Image>
      <image>
        
      </image>
  </Styled.Image>
)
Image.propTypes = {
  size: oneOf(["small", "medium", "large"]),
}

Image.defaultProps = {
  size: "medium",
}

export default Image

1
  • The component handles rendering an image, not an image upload functionality. It’s not clear what you’re trying to achieve? If you want the component to use an uploaded image (eg via the File API) then it’s a matter of generating a base64 string and then passing it to the src prop.
    – Terry
    Oct 30, 2022 at 18:14

1 Answer 1

0

For creating a very simple Image component that gets its src and alt props from other components using it, and handle its styling within itself, you would want to use something like below:

The Image component itself:

import styled from 'styled-components';

const StyledImage = styled.img`
  display: block;
  width: 100%;
  /* ALL OTHER STYLINGS GO HERE */
`;

const Image = ({ src, alt }) => {
  return <StyledImage src={src} alt={alt} />;
};

export default Image;

The other components could use this Image component like this:

<Image
    src="https://plus.unsplash.com/premium_photo-1661963934962-0b4426a0793f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
    alt="New York"
/>

This way you can add the rest of the props to further customize the Image component as you further develop your app.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.