React应用同目录图片无法显示问题求助（WebStorm可预览）

问题详情 #

我将React组件与图片放置在同一目录下，编写的Header组件代码如下：

import classes from './Header.module.css'

import React from 'react';

const Header = () => {
    return (
        <div className={classes.header}>
            <div className={classes.logo}>
                <img src="logo.png" alt="Logo"/>
            </div>
        </div>
    );
};

export default Header;

组件文件、Header.module.css、logo.png三者处于同一目录，WebStorm中可以正常预览图片，但浏览器里无法加载该图片。

解决方案 #

方法1：通过import引入图片（通用推荐） #

React项目中，直接用相对字符串路径作为src无法被打包工具正确解析，需先导入图片资源：

import classes from './Header.module.css';
import React from 'react';
import logo from './logo.png'; // 引入图片资源

const Header = () => {
    return (
        <div className={classes.header}>
            <div className={classes.logo}>
                <img src={logo} alt="Logo"/> {/* 使用导入的图片变量 */}
            </div>
        </div>
    );
};

export default Header;

方法2：将图片放入public目录 #

如果项目存在public目录，将logo.png移到该目录下，修改src为根相对路径：

<img src="/logo.png" alt="Logo"/>

注：public目录下的资源不会被打包工具处理，路径直接基于项目根目录。

方法3：检查打包工具配置（自定义场景） #

若使用自定义webpack配置，需确保配置了图片资源解析规则（webpack 5+使用Asset Modules）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

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