L'Image ne s'affiche pas avec MUI Réagir

Question 1

J'essaie d'afficher mes photos avec itemDate.js fichier :

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

et les appels avec mon Portefeuille:

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>

il n'y a pas de message d'erreur, le chemin d'accès est correct, mais rien n'apparaît sur ma page. Il travaille avec le lien mais ne fonctionne pas avec chemin d'accès local. une idée?

Merci

Question 2

Je ne suis pas arriver tout problème avec votre code. Je viens de copier votre code et de préparer un codesandbox et de l'exécuter. il fonctionne très bien.

Voici le code complet:

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

Je ne suis pas arriver tout problème avec votre code. Je viens de copier votre code et de préparer un codesandbox et de l'exécuter. il fonctionne très bien.

Voici le code complet:

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>
  );
}

L'Image ne s'affiche pas avec MUI Réagir

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie