在反应中动态加载图像作为道具答案

【问题标题】：dynamically load an image as a prop in react在反应中动态加载图像作为道具
【发布时间】：2020-09-23 13:44:09
【问题描述】：

我正在尝试在反应中动态加载图像并将它们作为道具传递。我有一个 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;

任何想法如何加载这些图像？如果有帮助，卡片组件来自材质 UI。（它在文档中说 image 属性只接受一个字符串）

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

【问题讨论】：

标签： reactjs image dynamic material-ui react-props

【解决方案1】：

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

import ArticleImg1 from 'image path';

然后像这样构造你的对象数组

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

如果我正确理解了您的问题，它将起作用。

【讨论】：

我认为它会起作用，但它并不是很有活力。因为每次添加新文章时，我都需要始终打开代码并将图像导入到许多组件中。而不是仅仅将图像添加到文件夹中，然后从为许多组件提供服务的单个 json 文件中读取路径。例如，该图像也将用于主要文章页面。基本上要更新整个网站我只想将图像添加到图像文件夹并使用其路径更新 json 文件
就像一个注释，如果你把一个 ""h t t p://stolen-online-image"" 作为 JSON 文件中的值，它可以完美地工作
您可以创建一个 javascript 文件，将所有图像导入同一个文件中，并可以根据您的要求将您的数据导出为对象或对象数组。所以在每个组件中你只需要导入你想要使用的数据。您不需要在每个文件中都导入图像。

【解决方案2】：

答案在这里https://medium.com/react-courses/5-top-methods-to-import-and-load-images-dynamically-on-cra-react-local-production-build-855d3ba3e704

您需要在 json 中包含图像的文件名，而不是完整路径。

title:"article1"
headline:"headline1"
image:"articleimage1"
articleContent:"ipsum lorem

然后在卡片组件中：您可以将资源分配给组件...

const Image = require( '/src/images/'+ props.image);

在 JSX 中

<img className="card-img-top" src={ Image } alt="image not found" />

或者在jsx中做require

 <img className="card-img-top" src={ require( '/src/images/'+ props.image) } alt="image not found" />

假设所有图像都在同一个文件夹中...

【讨论】：