使用react-svg在React中嵌入SVG时出现404错误求助

嘿，我之前也碰到过一模一样的问题！Webpack编译成功但浏览器找不到SVG，大概率是路径配置或者Webpack资源处理的问题，给你几个排查方向：

• 先确认文件路径是否正确
  别小看路径问题，很多时候都是这里栽跟头。比如你的FrontPage.jsx在src/components目录，而SVG在src/assets，那路径得写成../assets/anImage.svg才行。另外注意大小写，本地系统可能不区分，但部署后服务器（比如Linux）是严格区分大小写的，文件名错一个字母就会404。

• 调整React-SVG的用法 + 配置Webpack
  如果用的是Create React App这类脚手架，其实更推荐用import方式引入SVG，然后传给react-svg的src属性（而不是path）：

  import React from 'react';
  import ReactSVG from 'react-svg';
  import anImage from './anImage.svg'; // 直接导入SVG文件
  
  const FrontPage = () => (
    <div>
      <p>there is some writing between these tags</p>
      <ReactSVG src={anImage} /> {/* 用src替代path */}
    </div>
  );
  
  export default FrontPage;
  

  要是你自己配置Webpack，得确保有处理SVG的loader，比如file-loader：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: ['file-loader'],
        },
      ],
    },
  };
  

  这样Webpack会把SVG打包到输出目录，并且自动生成正确的访问路径。

• 如果SVG放在public文件夹里
  要是你把SVG放在项目根目录的public文件夹下，那路径得加根路径斜杠：

  <ReactSVG path="/anImage.svg" />
  

  因为public文件夹是静态资源的根目录，直接用/开头就能访问到。

• 清理缓存重新构建
  有时候Webpack的缓存会搞鬼，试试删除build文件夹（Create React App）或者node_modules/.cache，然后重新运行npm start或npm run build，说不定就能解决。

按照这几步排查，应该能搞定你的404问题！

内容的提问来源于stack exchange，提问作者WΔ_