React.js中引入本地SVG Logo不显示，仅呈现alt替代文本问题求助

优先排查的常见问题 #

• 路径引用错误
  当前代码写的require('../components/images/DEMOSITE.svg')是最高发的问题：假设Navbar组件文件本身存放在src/components/目录下，../语法会跳出当前components目录，根本匹配不到同层的images文件夹。正确的相对路径逻辑为：
  • 如果images文件夹和Navbar组件同属components目录，路径应写为./images/DEMOSITE.svg
  • 如果images文件夹存放在public公共静态资源目录下，不需要写require，直接给img标签的src赋值为/images/DEMOSITE.svg即可
• 资源解析配置异常
  如果你使用的是自定义Webpack配置的项目，需确认Webpack规则中已经配置了.svg后缀文件的解析逻辑，对应安装file-loader类的资源加载依赖。
  针对新手最常用的Create React App、Vite类脚手架，推荐替换原生ESModule引入方式替代require语法：直接在文件顶部用import logo from './images/DEMOSITE.svg'导入SVG资源，后续img标签直接用导入的logo变量作为src值，这类方式被主流脚手架原生支持，不需要额外配置。
• SVG文件本身合法性问题
  直接把目标DEMOSITE.svg文件拖入浏览器窗口打开，如果无法正常渲染，说明文件存在损坏、后缀与实际内容不匹配（比如把PNG格式图片直接改后缀为svg）的问题，需要替换成有效的SVG源文件。

调试校验技巧 #

打开浏览器开发者工具的Network面板，刷新页面后定位对应SVG资源的请求状态：

• 返回404状态：说明路径匹配错误，按照前面的路径规则修正即可
• 返回200状态但无法渲染：说明资源请求成功，大概率是文件内容无效或者响应头的MIME类型配置错误

修正后的参考代码片段 #

import React from 'react';
// 顶部统一引入SVG静态资源
import logo from './images/DEMOSITE.svg';
import {
  Nav,
  NavLink,
  Bars,
  NavMenu,
  NavBtn,
  NavBtnLink
} from './NavbarElements';

const Navbar = () => {
  return (
    <>
      <Nav>
        <NavLink to='/'>
          <img src={logo} alt='logo' />
        </NavLink>
        {/* 其余导航逻辑保持原有实现即可 */}
      </Nav>
    </>
  );
};

export default Navbar;

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