[英]Image doesn't display with MUI React
我尝试使用 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>
没有错误消息,路径正确,但我的页面上没有任何内容。 它适用于链接,但不适用于本地路径。 任何想法?
谢谢
我对您的代码没有任何问题。 我刚刚复制了您的代码并准备了一个代码框并运行它。 它工作正常。
这是完整的代码:
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>
);
}
我刚刚遇到了类似的问题,发现您必须从 map 退回所有物品。 因此,只需在您的 map function 中添加一个return
语句,如下所示:
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) => (
return (
<ImageListItem key={item.img}>
<img
src={item.img}
srcSet={item.img}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
)))}
</ImageList>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.