React使用require语法无法显示图片：问题排查与解决方法

核心问题 #

你错误地将图片资源的引用赋值给了img标签的**className属性**，而非**src属性**。require('../imagenes/montero.jpg')返回的是Webpack编译后的图片实际访问路径，这个值应该用于指定图片的src，而不是用来设置CSS类名。

正确写法（require方式） #

修改Tarjeta组件中的img标签代码：

import React from "react";

function Tarjeta (){
    return(
      <div className="tarjeta-jugador">
        <h1 className="nombre-jugador">Alvaro Montero</h1>
        {/* 把require的结果赋值给src属性，className按需设置 */}
        <img src={require('../imagenes/montero.jpg')} alt='Foto Montero' className="tarjeta-imagen" />
      </div>
    )
}
export default Tarjeta;

另一种推荐写法（import方式） #

也可以直接在组件顶部导入图片资源，代码可读性更强：

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' className="tarjeta-imagen" />
      </div>
    )
}
export default Tarjeta;

额外排查点 #

确认路径正确的前提下，以上两种写法都能正常加载图片。如果仍有问题，可以检查：

• 图片文件是否存在于指定路径，文件名（包括大小写）是否完全匹配
• Webpack配置是否正确处理了图片资源（React脚手架创建的项目默认已配置）

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