React项目中SVG图标无法显示仅展示alt文本的问题求助

核心问题 #

你的代码里存在两个关键问题：

1. images数组中src字段使用了字符串字面量（比如"ReactLogo"），但你导入的是变量ReactLogo——字符串不会被解析成实际的资源路径，导致浏览器找不到图标文件，只能显示alt文本。
2. 存在拼写错误：alt: "mngodb"应为alt: "mongodb"。

修正后的代码 #

import React from "react";
import ReactLogo from "./image/react.svg";
import TypeScript from "./image/typescript.svg";
import MongoDB from "./image/logo_mongodb_icon.svg";
import JavaScript from "./image/logo-javascript.svg";
import NodeJS from "./image/logo_nodejs_icon.svg";
import Express from "./image/expressjs-icon.svg";
import Python from "./image/python-4.svg";

function Main() {
  const images = [
    { src: ReactLogo, alt: "react" },
    { src: TypeScript, alt: "typescript" },
    { src: MongoDB, alt: "mongodb" },
    { src: JavaScript, alt: "javascript" },
    { src: NodeJS, alt: "nodejs" },
    { src: Express, alt: "express" },
    { src: Python, alt: "python" },
  ];
  return (
    <div>
      <div>
        {images.map((image, index) => (
          <img key={index} src={image.src} alt={image.alt} />
        ))}
      </div>
    </div>
  );
}

export default Main;

额外排查点 #

如果修正后图标仍无法显示，检查以下内容：

• 文件路径与文件名：确认SVG文件确实存在于./image/目录下，文件名（包括大小写）和导入语句完全一致（部分系统区分文件名大小写）。
• SVG文件完整性：直接在浏览器中打开SVG文件，确认文件未损坏、能正常渲染。
• 打包工具配置：若使用自定义Webpack配置，需确保配置了处理SVG的loader（如file-loader）；Create React App等脚手架默认支持SVG导入，无需额外配置。

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