Electron官方默认文件拖拽项目拖拽图标不显示问题咨询

可能的原因及解决方案 #

• Win10 系统兼容问题
  Win10 21H2及之后的版本会优先使用系统默认拖拽反馈样式，覆盖Electron的自定义拖拽图标，这个是官方示例未标注的平台限制，不属于操作失误。
• 示例配置遗漏
  v15.3.0的官方示例代码未补全Windows平台必填的icon参数，你需要手动调整两处代码：
  1. 渲染进程触发拖拽时，显式构造拖拽图标并传入：

  const { ipcRenderer, nativeImage } = require('electron')
  // 注意替换为实际图标路径，推荐用32*32/64*64的透明背景PNG
  const dragIcon = nativeImage.createFromPath('./drag-icon.png')
  document.getElementById('dragElement').addEventListener('dragstart', (e) => {
    e.preventDefault()
    ipcRenderer.send('ondragstart', {
      filePath: '/path/to/the/file/you/want/to/drag',
      icon: dragIcon
    })
  })
  

  2. 主进程接收拖拽事件时，把icon参数传入startDrag方法：

  const { ipcMain } = require('electron')
  ipcMain.on('ondragstart', (event, params) => {
    event.sender.startDrag({
      file: params.filePath,
      icon: params.icon // Windows平台必须显式传入该参数，示例默认省略会导致图标不显示
    })
  })
  

• 版本bug问题
  Electron v15.3.0本身存在Windows平台自定义拖拽图标偶发失效的bug，你可以将项目依赖的Electron版本升级到v15.5.0及以上的同大版本补丁版，无需跨大版本升级即可修复该问题。
• 图标加载失败排查
  你可以在渲染进程中打印dragIcon.isEmpty()的返回值，若返回true说明图标路径读取失败，调整路径到正确的可访问路径即可。

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