ภาพไม่แสดงผลกับ MUI ตอบโต้

Question 1

ฉันพยายามที่จะแสดงของฉันรูปกับ 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 ตอบโต้

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่