React JS中logo.svg无法加载的问题排查求助

问题梳理 #

导航栏组件位于src/components/NavBar/index.js，Logo文件在src/img/logo.svg，使用require('../../img/logo.svg')调用但无法加载。

排查与解决步骤 #

1. 验证路径准确性 #

先确认路径拼写、文件名大小写是否完全匹配（Linux/macOS系统区分文件名大小写，注意logo.svg不要写成Logo.svg）。当前路径../../img/logo.svg逻辑上是正确的：从src/components/NavBar/index.js回退两级到src目录，再进入img文件夹。

2. 改用导入式引用（推荐） #

避免使用require，直接通过ES模块导入Logo：

import React, { Component } from "react";
import { FaBars } from 'react-icons/fa';
import logo from '../../img/logo.svg'; // 导入Logo文件
import {Nav, NavbarContainer, NavLogo, NavMenu, NavItem, NavLinks, MobileIcon} from './NavbarComp.js';

export default class NavbarComp extends Component {
    render () {
        return (
            <div>
                <Nav>
                    <NavbarContainer>
                        <NavLogo to="/">
                            <img src={logo} alt="logo"/> {/* 使用导入的变量作为src值 */}
                        </NavLogo>
                        {/* 其余代码保持不变 */}
                        <MobileIcon>
                            <FaBars />
                        </MobileIcon>
                        <NavMenu>
                            <NavItem>
                                <NavLinks to="home">Home</NavLinks>
                                <NavLinks to="about">Sobre Nós</NavLinks>
                                <NavLinks to="services">Serviços</NavLinks>
                                <NavLinks to="partner">Parceiros</NavLinks>
                                <NavLinks to="contact">Contato</NavLinks>
                            </NavItem>
                        </NavMenu>
                    </NavbarContainer>
                </Nav>
            </div>
        );
    }
}

3. 检查Webpack配置（自定义配置场景） #

如果是自定义Webpack配置，需确认是否配置了处理SVG文件的loader，比如file-loader或url-loader，示例配置如下：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'img/'
            }
          }
        ]
      }
    ]
  }
};

4. 切换到Public目录存放（备选方案） #

将logo.svg移动到public/img/目录下，然后直接使用根路径引用：

<img src="/img/logo.svg" alt="logo"/>

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