使用Create React App创建React项目时图片无法渲染致白屏求助

问题原因 #

你的代码存在两个关键问题，导致图片无法渲染甚至页面白屏：

• 图片路径错误：Card组件位于src/Components目录下，你写的./Images/monstera.jpeg是相对Components目录的路径，但Images文件夹在src根目录，路径层级不对。
• 未传递必要props：Card组件中使用了props.name和props.price，但App组件调用<Card/>时没传这些属性，虽不会直接导致白屏，但会引发控制台警告，也可能影响组件正常渲染。

修复步骤 #

1. 修正图片路径 #

Create React App中渲染本地图片有两种标准方式，任选其一即可：

方式一：import引入（推荐）

在Card组件顶部直接导入图片，Webpack会自动处理打包和路径：

import React from 'react';
// 路径从Components目录上跳一级到src，再进入Images文件夹
import monsteraImg from '../Images/monstera.jpeg';

export default function Card(props) {
    return (
       <div className="card">
           <img src={monsteraImg} alt="monstera"></img>
           <div className="card-stats">
                <p>{props.name}</p>
                <p>{props.price}</p>
           </div>
       </div> 
    )
}

方式二：修正require的路径层级

如果坚持用require，调整路径到正确层级：

// 将./Images改为../Images，对应从Components到src再到Images的路径
<img src={require("../Images/monstera.jpeg")} alt="monstera"></img>

2. 传递props给Card组件 #

在App组件中调用Card时，传入所需的name和price属性。如果要渲染多个卡片，可以结合data数组遍历：

import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';

function App() {
 
  return (
    <div className="App">
      <Header></Header>
      <div className="row">
        <Inventory>
          <div className="cards-list">
            {/* 遍历data渲染多个卡片 */}
            {data.map(item => (
              <Card key={item.id} name={item.name} price={item.price} />
            ))}
          </div>
        </Inventory>
        <Cart></Cart>
      </div>
    </div>
  );
}

export default App;

React渲染本地图片的说明 #

在Create React App项目中，本地图片必须通过**模块导入（import/require）**的方式引用，不能直接写相对路径（比如src="../Images/monstera.jpeg"），因为Webpack会对资源进行打包处理，只有通过模块导入的资源才会被正确解析和输出到构建目录中。

内容的提问来源于stack exchange，提问作者Dumbledore