React应用本地图片无法通过img标签显示，背景图及网络图正常

核心原因 #

React基于webpack打包，直接写相对路径（比如images/witcher.jpg）在打包后会因资源路径解析规则失效，而背景图和网络URL的解析逻辑不同，所以能正常显示。

可行解决方案 #

• 导入图片资源（推荐）
  先在组件文件顶部导入图片，再将导入的变量作为src值：

  import witcherImg from './images/witcher.jpg';
  
  function Gallery() {
    return (
      <div className="Gallery">
        <div className="ItemOne">
          <img src={witcherImg} alt="ImageOne" />
        </div>
        <div className="ItemTwo">2</div>
        <div className="ItemThree">3</div>
        <div className="ItemFour">4</div>
      </div>
    );
  }
  

  webpack会自动处理图片的打包路径，确保资源正确引用。

• 使用public目录存放图片
  将图片放在项目根目录的public文件夹下（比如public/images/witcher.jpg），然后用绝对路径引用：

  <div className="Gallery">
    <div className="ItemOne">
      <img src="/images/witcher.jpg" alt="ImageOne" />
    </div>
    <div className="ItemTwo">2</div>
    <div className="ItemThree">3</div>
    <div className="ItemFour">4</div>
  </div>
  

  注意路径开头要加/，表示从public根目录开始查找。

• 检查路径大小写与文件存在性
  确保代码里的路径、文件名大小写和实际文件完全一致（Linux/macOS系统对大小写敏感），同时确认图片文件确实存在于指定路径中。

• 自定义webpack配置检查（仅针对非create-react-app项目）
  如果是自定义webpack配置，需确保配置了file-loader或url-loader来处理图片资源，示例配置片段：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpg|jpeg)$/i,
          use: ['file-loader'],
        },
      ],
    },
  };
  

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