React项目图片引用无效，页面空白无报错问题求助

1. 修正图片导入路径 #

你的App.js位于src/目录下（从import Navbar from "./components/Navbar/Navbar"的路径可判断），而logo.jpg同样在src/目录下，当前导入路径../src/logo.jpg是错误的——它会跳出当前src/目录再去寻找src/，自然找不到目标文件。

将导入语句修改为：

import logo from "./logo.jpg";

2. 确认App组件已被正确渲染 #

检查入口文件（通常是src/index.js）是否包含渲染App组件的代码，缺失这一步页面会呈现空白：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 验证资源配置（针对Create React App环境） #

如果使用Create React App初始化项目，确保遵循默认资源规则：

• 图片需放在src/或public/目录下
• 从src/导入图片时，Webpack会自动处理并生成正确的访问URL

4. 排查元素样式问题 #

有时图片已加载，但被CSS样式隐藏。打开浏览器开发者工具（F12），查看img元素的样式，确认它没有被设置display: none、opacity: 0或者超出可视区域。

内容的提问来源于stack exchange，提问作者Alorya Seramik ve Teknoloji A