React 组件中无法显示图片，通常是因为 标签缺少必需的 src 属性，或错误地将 require() 的返回值直接赋给 className 而非 src。本文详解两种标准解决方案：使用 public 目录静态资源路径和通过模块导入方式正确处理图片。
react 组件中无法显示图片，通常是因为 `` 标签缺少必需的 `src` 属性，或错误地将 `require()` 的返回值直接赋给 `classname` 而非 `src`。本文详解两种标准解决方案：使用 `public` 目录静态资源路径和通过模块导入方式正确处理图片。
在你的代码中，核心问题有两个：
-
<img alt="如何在 React 中正确显示本地图片" >标签缺失src属性 ——className是用于设置 CSS 类名的，不能承载图片资源； -
误用
require()—— 你把require('../imagenes/montero.jpg')的结果赋给了className，这不仅语义错误，且require()返回的是一个模块 ID 或 base64 字符串（取决于打包配置），必须显式传给src才能生效。
✅ 正确做法如下：
方案一：使用 public 目录（推荐用于静态资源）
将图片文件 montero.jpg 放入 public/imagenes/montero.jpg（注意：public 目录下的资源可被浏览器直接访问，无需导入）。然后在组件中使用绝对路径作为 src：
import React from "react";
function Tarjeta() {
return (
<div className="tarjeta-jugador">
<h1 className="nombre-jugador">Alvaro Montero</h1>
<img src="/imagenes/montero.jpg" alt="Foto Montero" />
</div>
);
}
export default Tarjeta;⚠️ 注意：路径以
/开头，表示从public根目录开始查找；确保文件大小写、扩展名（.jpgvs.jpeg）与实际一致。
方案二：通过模块导入（适用于需 Webpack/ESBuild 处理的场景）
若你希望图片经构建工具处理（如压缩、哈希命名、自动优化），应将图片放在 src/ 下（如 src/imagenes/montero.jpg），并用 import 或 require() 导入后赋值给 src：
import React from "react";
import monteroImg from '../imagenes/montero.jpg'; // ✅ 正确：导入为模块
function Tarjeta() {
return (
<div className="tarjeta-jugador">
<h1 className="nombre-jugador">Alvaro Montero</h1>
<img src={monteroImg} alt="Foto Montero" /> {/* ✅ src 接收导入的路径 */}
</div>
);
}
export default Tarjeta;? 提示：
create-react-app、Vite 等现代脚手架默认支持此语法；若使用自定义 Webpack 配置，请确保已启用url-loader或asset-modules。
补充建议
- 始终为
<img alt="如何在 React 中正确显示本地图片" >添加alt属性，提升可访问性； - 检查浏览器开发者工具的 Network 面板，确认图片请求是否返回
200 OK；若为404，说明路径错误； - 避免在
className、style等属性中误传资源路径——它们只接受字符串类名或样式对象。
掌握这两种方式，即可灵活应对各类 React 图片加载需求。
