이미지를 표시하지 않으로 MUI 반응

Question 1

I 을 표시하려고 내 사진 itemDate.js 파일:

const itemData = [
    {
      img: "../assets/photos/photoportrait.jpeg",
      title: 'Breakfast',
    },

고 부르와 나는 포트폴리오 구성 요소:

import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import itemData from './itemData';


function Portfolio() {

return(
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={item.img}
        srcSet={item.img}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

오류 메시지가 없는 경로 정확 하지만 아무것도 나타나에 내 페이지입니다. 그의 작업에 대한 링크와 함께 하지만 현지인 경로입니다. 어떤 생각이 있으십니까?

감사

Question 2

내가 못하고 어떤 문제로 당신의 코드입니다. 나는 그냥 복사한 코드를 준비 codesandbox 고 그것을 실행합니다. 이 상품에 대한 리뷰가 없습니다.

여기에 완벽한 코드:

import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";

const itemData = [
  {
    img: "../assets/photos/photoportrait.jpeg",
    title: "Breakfast"
  }
];

export default function App() {
  return (
    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={item.img}
            srcSet={item.img}
            alt={item.title}
            loading="lazy"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

Khabir · Answer 1 · 2021-11-23T14:14:21

내가 못하고 어떤 문제로 당신의 코드입니다. 나는 그냥 복사한 코드를 준비 codesandbox 고 그것을 실행합니다. 이 상품에 대한 리뷰가 없습니다.

여기에 완벽한 코드:

import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";

const itemData = [
  {
    img: "../assets/photos/photoportrait.jpeg",
    title: "Breakfast"
  }
];

export default function App() {
  return (
    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={item.img}
            srcSet={item.img}
            alt={item.title}
            loading="lazy"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

이미지를 표시하지 않으로 MUI 반응

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리