Question

我正在尝试动态加载图像以作为响应并将它们作为道具传递。我有一个data.json文件，它基本上是文章对象的数组。

title:"article1"
headline:"headline1"
image:"/src/images/articleimage1"
articleContent:"ipsum lorem"

在第一个组件中，我通过数组映射并返回带有道具的“卡片”

    const featuredArticles = imageCardArray.map(elem => <ImageCard 
        title={elem.title}
        headline = {elem.headline} 
        image= {elem.image}
        
        />)
   

    return (
        <div className ="center">
{featuredArticles}
        </div>

然后我在卡组件本身中使用这些道具。除了图像之外，一切都很好

function ImageCard(props) {
  return (
    <div className="imageCard">
      <Card>
        <CardActionArea>
          <CardMedia
            component="img"
            image={props.image}
            title={props.title}
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {props.title}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              {props.headline}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          <Button size="small" varient="outlined">
            Artigo completo
          </Button>
        </CardActions>
      </Card>
    </div>
  );
}

export default ImageCard;

有什么想法如何加载这些图像？如果有帮助，则卡片组件来自物料用户界面。（在文档中说image属性只接受一个字符串）

我可以通过在顶部导入图像，然后将图像= {image}加载到卡中，以获取图像，但是当然，它不是动态的，并且所有卡都具有相同的图像。请帮忙！！谢谢

Answer 1

您需要从顶部目录导入图像

import ArticleImg1 from 'image path';

然后构造这样的对象数组

{
  title:"article1"
  headline:"headline1"
  image:ArticleImg1
  articleContent:"ipsum lorem"
}

如果我正确理解了您的问题，它将可以正常工作。

动态加载图像作为反应中的道具

1 个答案: