material-ui/core 组件不显示图像 - 反应答案

【问题标题】：material-ui/core components not showing image - reactmaterial-ui/core 组件不显示图像 - 反应
【发布时间】：2022-10-03 05:01:09
【问题描述】：

我在这里关注这个 mern stack 教程：https://www.youtube.com/watch?v=ngc9gnGgUdA&list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu&ab_channel=JavaScriptMastery

我被困在 33:00 左右

我已经嵌入了 material-ui/core 组件 - Container、AppBar、Typography，它们使用它们的属性指定，但是当我运行它时它不显示图像或任何 material-ui/core 组件。

我只使用带有图像标签的 div 标签对此进行了测试，它显示得很好，所以我不确定 material-ui/core 组件不能做到这一点。所以我知道问题不在于图像或图像文件路径。

它编译得很好，只显示我没有使用的组件的警告，但是当它在浏览器中呈现时，它根本不显示图像或任何 material-ui/core 组件。

这是我的 App.js 文件：

import React from \'react\';
import { Container, AppBar, Typography, Grow, Grid } from \'@material-ui/core\';

import memories from \'./images/memories.png\'

const App = () => {
    return (         
        <Container maxWidth=\"lg\">
            <AppBar position=\"static\" color=\"inherit\">
                <Typography variant=\"h2\" align=\"center\">Memories</Typography>
                 <img src={memories} alt=\"memories\" height=\"60\" width=\"60\" />
            </AppBar>
        </Container> 
    );
};

export default App;

这是我的 index.js 文件：

import React from \'react\';
import ReactDOM from \'react-dom\';

import App from \'./App\'

ReactDOM.render(<App />, document.getElementById(\'root\'));

任何帮助将不胜感激，并非常乐意澄清任何事情:)

验证src 是否准确。将memories 记录到控制台并确保它实际上是文件所在的位置。当心相对路径。
我将 src 更改为完整路径并用索引文件中的图像标记替换 <App /> 并显示它。
用完整路径替换src但不替换App，正常运行，这样可以吗？
不。将 src 更改为 \"/home/namso1902/Documents/memories_project/client/src/images/memories.png\" 仍然不显示。它不会抛出任何编译错误，但不会在浏览器中呈现。
在检查器中，渲染的 img 元素是否具有有效的、可解析的 src？如果不是，则可能是 CSS 问题

标签： javascript css reactjs

【解决方案1】：

我知道现在很晚，但我用过

<CardMedia  
        alt="title"
        component="img"
        title="title"
        image={imgsrc}/>

它对我有用！！！

【讨论】：