Imagen no aparece con MUI Reaccionar

Question 1

Trato de mostrar mis fotos con itemDate.js archivo :

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

y llamando con mi Cartera de componente:

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>

no hay mensaje de error, la ruta de acceso es correcta pero nada aparecen en mi página. Se está trabajando con el link pero no funciona con la ruta de acceso local. alguna idea?

Gracias

Question 2

No estoy recibiendo ningún problema con el código. He copiado el código y preparar un codesandbox y ejecutarlo. funciona bien.

Aquí está el código completo:

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

No estoy recibiendo ningún problema con el código. He copiado el código y preparar un codesandbox y ejecutarlo. funciona bien.

Aquí está el código completo:

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

Imagen no aparece con MUI Reaccionar

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría