Electron+React+Forge构建后SVG图片无法加载问题求助

先查CopyPlugin配置是否到位 #

打开你的Webpack配置文件，核对CopyPlugin的参数：

• 确保from是你存放SVG的实际路径，比如src/resources/images，to要对应构建后输出目录里的images文件夹，配置示例：

  new CopyPlugin({
    patterns: [
      { from: 'src/resources/images', to: 'images' },
    ],
  });
  

• 构建完去输出目录（一般是dist）里找images/send.svg，如果没有，说明路径写错了，检查from是不是相对于项目根目录的正确路径。

再改组件里的引用路径 #

开发环境的相对路径到生产环境可能失效，换这两种方式更稳妥：

• 要是用Create React App，直接把图片丢public/images文件夹，组件里用绝对路径/images/send.svg引用。
• 自定义Webpack配置的话，用process.env.PUBLIC_URL拼接路径：

  <img src={`${process.env.PUBLIC_URL}/images/send.svg`} alt="发送" />
  

别再用./images/send.svg这种相对路径了，打包后组件的位置和图片可能不在同一层级，肯定找不到。

换Webpack Asset模块替代CopyPlugin（更省心） #

Webpack5自带的asset模块能自动处理静态资源，不用手动配置CopyPlugin：
在webpack.config.js里加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]', // 打包后图片会放到dist/images下
        },
      },
    ],
  },
};

然后组件里直接导入SVG用：

import SendIcon from './resources/images/send.svg';

// 渲染
<img src={SendIcon} alt="发送" />

这种方式Webpack会自动处理路径，不会出错。

最后验证这两步 #

1. 执行npm run build后，去输出目录确认images/send.svg存在。
2. 打开构建后的index.html，看img标签的src是不是正确指向图片路径。

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