如何通过ES6导入的文件创建Electron nativeImage并适配Webpack构建？

问题根因 #

• 调用nativeImage.createFromPath出现空白图标：webpack默认asset/resource类型导入图片仅返回打包后的哈希文件名，不是文件的完整绝对路径，Electron无法仅通过文件名定位到资源文件。
• 调用nativeImage.createFromBuffer崩溃：asset/source类型返回的是文件的字符串序列化内容，不是Node原生的Buffer实例，不符合接口参数要求。

可行实现方案 #

该模式完全可以在Electron配合Webpack的场景下使用，无需强制使用require()和相对路径，推荐两种稳定实现方案：

方案1：拼接完整绝对路径加载 #

首先调整webpack的静态资源配置，明确图片资源的输出路径：

// webpack.config.js 相关配置
module.exports = {
  // 其他全局配置省略
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|ico)$/i,
        type: 'asset/resource',
        generator: {
          // 统一将图片打包到 assets/images 目录下
          filename: 'assets/images/[name].[hash][ext]',
          publicPath: process.env.NODE_ENV === 'production' ? './' : 'http://localhost:你的开发端口号/'
        }
      }
    ]
  }
}

业务代码中通过Electron的app.getAppPath()拼接完整资源路径：

import { nativeImage, app } from 'electron';
import path from 'path';
// 可配置webpack alias直接用别名导入，无需写相对路径
import ourImagePath from 'our-images/src/ourImage.png' 

const fullImagePath = path.join(app.getAppPath(), ourImagePath);
const trayIcon = nativeImage.createFromPath(fullImagePath);

方案2：Base64内联加载（兼容性最优） #

针对托盘图标这类小体积图片，可直接配置webpack转base64内联，完全不依赖本地文件路径：

// webpack.config.js 相关配置
module.exports = {
  // 其他全局配置省略
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|ico)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 10KB以下的图片自动转base64内联，可根据需求调整阈值
            maxSize: 10 * 1024
          }
        }
      }
    ]
  }
}

业务代码直接传入base64内容加载：

import { nativeImage } from 'electron';
import ourImageBase64 from 'our-images/src/ourImage.png' 

const trayIcon = nativeImage.createFromDataURL(ourImageBase64);

补充说明 #

如果要完全避免相对路径导入，可在webpack配置中添加resolve.alias规则，给静态资源目录设置别名，直接通过别名导入资源即可。
之前require.resolve打包后不稳定是因为开发环境和打包后的资源目录结构不一致，上述两种方案都可以规避该问题，其中base64内联的方案不依赖本地文件路径，打包后的兼容性更稳定。

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