Electron ReactJS 和 Material-Ui 中的卡片图像加载问题答案

【问题标题】：Problem with card image load in Electron ReactJS and Material-UiElectron ReactJS 和 Material-Ui 中的卡片图像加载问题
【发布时间】：2021-07-31 17:34:41
【问题描述】：

如何加载本地图片？？我使用 Electron Reactjs 和 Material-UI 包。

我的代码在这里：

         <CardMedia
            className={classes.media}
            image="../../../assets/img/keylime-pie.jpeg"
            title="Contemplative Reptile"
          />

错误是：

GET file:///static/images/cards/live-from-space.jpg net::ERR_FILE_NOT_FOUND

请帮忙解决这个问题，谢谢！！

【问题讨论】：

标签： reactjs material-ui electron

【解决方案1】：

除非图像在公共文件夹中，否则您必须在使用它们之前导入。

import CardMediaImage from '../Assets/img/keylime-pie.jpeg';

<CardMedia
  className={classes.media}
  image={CardMediaImage}
  title="Contemplative Reptile"
/>

更新：

我相信您的CardMedia 期望图像路径。在这种情况下，您可以将图像移动到公共文件夹中，例如， public/Assets/img/keylime-pie-jpeg，然后你可以提供没有public的路径。

<CardMedia
  className={classes.media}
  image='/Assets/img/keylime-pie.jpeg'
  title="Contemplative Reptile"
/>

【讨论】：

显示此错误；未捕获的错误：模块解析失败：意外字符 '�' (1:0)
你是如何在你的CardMedia 组件中使用image 属性的？可以给CardMedia的图片实现代码吗？
卡媒体代码：
我指的是 CardMedia 组件的代码，而不是您调用它的方式。您可以编辑您的问题并将其添加到其中，而不是放入 cmets。
立即查看我的问题