electron-builder打包electron+react应用图片路径失效无法显示问题

你遇到的问题核心是两个层面的路径解析不匹配：一是Create React App（以下简称CRA）本身的静态资源处理规则，二是electron生产环境和开发环境的路径解析逻辑差异，仅配置extraResources/extraFiles但没有同步修改代码里的引用路径，自然无法生效。以下是可直接落地的解决方案：

方案1：将业务图片放入src目录（推荐，符合CRA原生规范） #

该方案无需额外修改electron-builder配置，适配性最高：

• 所有需要在React组件内引用的图片，统一放入src/assets/imgs这类src下的目录
• 组件内使用ES模块导入的方式引用图片，不要直接写字符串路径：

// 组件头部导入
import logo from '@/assets/imgs/logo.png'

// 渲染时直接使用导入的变量
<img src={logo} alt="logo" />

CRA生产构建时会自动将这类图片哈希重命名后输出到build/static/media目录，同时自动替换代码里的路径为生产环境的正确相对路径，打包后不会出现路径错误。

方案2：必须使用src外的公共图片的处理方式 #

如果存在动态生成文件名、无法提前导入的图片，可以用public目录+路径适配的方案：

• 把所有公共图片放到CRA项目根目录的public/imgs文件夹下
• 代码里引用时用process.env.PUBLIC_URL拼接路径：

<img src={`${process.env.PUBLIC_URL}/imgs/test.png`} alt="test" />

• 如果图片存放在public之外的其他目录，才需要配置electron-builder的extraResources，同时代码里要动态拼接electron资源路径：

// package.json的build配置示例
"build": {
  "files": [
    "build/**/*",
    "main.js" // 替换为你的electron主进程文件路径
  ],
  "extraResources": [
    {
      "from": "你的外部图片存放目录/",
      "to": "imgs/"
    }
  ]
}

// 代码里读取extraResources的图片路径
const path = require('path')
const imgPath = path.join(process.resourcesPath, 'imgs/test.png')
// 渲染时转成file协议路径
<img src={`file://${imgPath}`} alt="test" />

必做排查项 #

• 确认electron主进程生产环境加载的是build/index.html，不是开发环境的localhost地址
• React代码里不要直接写根路径形式的字符串如/imgs/test.png，electron的file协议下会解析到系统根目录，必然找不到资源
• 打包完成后可以进入应用的resources目录，手动检查对应图片文件是否存在，路径是否和代码里拼接的路径一致

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