머티리얼 UI에 이미지 컴포넌트가 있습니까?

머티리얼 UI에 이미지 컴포넌트가 있습니까?

이전에 다른 리액션 컴포넌트를 사용했는데, 대부분 이미지 컴포넌트가 있는데, Material-UI에서는 찾을 수 없습니다.

아니면 Card Media API를 통해 이루어집니까?아니면 단순히 태그를 사용할까요?감사합니다!

다른 옵션(최소한 v5에서는)은 Box 컴포넌트를 사용하여 아래 예시와 같이 img할 기본 html 요소를 선택하는 것입니다(v5 공식 문서에서 복사).

     <Box
        component="img"
        sx={{
          height: 233,
          width: 350,
          maxHeight: { xs: 233, md: 167 },
          maxWidth: { xs: 350, md: 250 },
        }}
        alt="The house from the offer."
        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&w=350&dpr=2"
      />

material-ui와 함께 사용할 수 있는 특정 커스텀 img 컴포넌트는 없습니다.

단, 다른 래퍼 컴포넌트 내의 심플한html img 컴포넌트를 사용하여 커스텀 img 컴포넌트를 직접 작성할 수 있습니다.

<Paper variant="outlined">
   <img src="url" />
</Paper>

또한.<CardMedia/>컴포넌트는 와 함께 사용해야 합니다.<Card/>요소.이미지를 사용하는 또 다른 컴포넌트는<Avatar>요소.

<Avatar alt="Example Alt" src="/static/images/avatar.jpg" />

Material-ui는 Material-ui-image를 사용하는 것을 추천합니다만, 설치는 따로 해야 하지만, 매우 즐거웠습니다.설치 후에는 예상대로 다음과 같이 간단합니다.

import Image from "material-ui-image";
...
<Image src="image/src/" />

이 질문에 답변하는 동안 최신 버전의MUI이5.2.2정확한 이미지 구성요소는 없지만MUI님은 서드파티가 제공하는 이미지 컴포넌트 2개를 언급하셨습니다.하나는 mui-image이고 다른 하나는 material-ui-image입니다.MUI에 따르면mui-image는 이미지 로딩에 관한 재료 지침을 충족하는 유일한 MUI 이미지 컴포넌트입니다."

쉽게 설치할 수 있습니다.mui-image다음의 몇개의 스텝에 의해서,

인스톨:

npm i mui-image
//or
yarn add mui-image

Import:

import Image from 'mui-image'
// or
import { Image } from 'mui-image'

용도:

<Image src="my-image.png" />

상세 정보mui-image props기타 체크npmjs패키지 문서는 이쪽입니다.

를 사용합니다.Avatar요소

<Avatar variant={"rounded"} alt="The image" src={url} style={{
    width: 200,
    height: 200,
  }} />

문서

mui's Box 컴포넌트를 사용하는 것이 좋습니다.따라서 다른 의존관계 없이 재사용 가능한 자체 구성요소를 쉽게 구축할 수 있습니다.다음과 같은 방법을 시도해 보십시오.

import {Box, BoxProps, } from "@mui/material";

type ImgProps = {
    alt: string;
    src: string;
    // add more HTML img attributes you need
}

export const Img = (props: BoxProps & ImgProps) => <Box component='img' {...props} />;

아래와 같이 Material UI에서 CardMedia를 사용할 수 있습니다.재료 UI의 복합 상호 작용 섹션을 참조하십시오. 예

<CardMedia
    className={classes.media}
    image="/static/images/cards/paella.jpg"
    title="Paella dish"
/>

Card Media 컴포넌트 사용

const [previewImage, setPreviewImage]=  useState<any>();

const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
        setPreviewImage(URL.createObjectURL(acceptedFiles[0]));
    },
});

<CardMedia
   component="img"
   sx={{
   height: 233,
   width: 350,
   maxHeight: { xs: 233, md: 167 },
   maxWidth: { xs: 350, md: 250 },
   }}
   src={previewImage}
/>
                                

상세

컴포넌트 소품과 함께 박스 컴포넌트 사용:

 <Box component="img" src={image} alt={caption} sx={{ height: "50px", width: "auto" }} />

언급URL : https://stackoverflow.com/questions/61263669/does-material-ui-have-an-image-component