javascript - Electron:如何从 appdata 提供文件

Question

我觉得这是一个非常基本的问题，但我已经研究了好几个小时并且似乎在寻找答案。我有一个 Electron 应用程序，我也在上面使用了 create-react-app。我在 Electron 应用程序的 appData 文件夹中有图像文件，我希望能够使用 img 标签在渲染器中显示它们(使用 react )。

我似乎不知道该怎么做。对 img src 使用绝对路径和 file://是行不通的。我还尝试注册一个自定义协议(protocol)，但似乎无法正常工作，我只是一直找不到文件(见下文)。任何想法或链接将不胜感激。

  protocol.registerFileProtocol('poster', (request, callback) => {
    const url = request.url.substr(9)
    console.log(url);
    callback({path: app.getPath('appData')+'/posters/'+url})
  }, (error) => {
    if (error) console.error('Failed to register protocol')
  })

图片标签看起来像这样:

<img src='poster://test.jpg'/>

Answer 1

我最终做的是更正我的原始代码以使用 userData 而不是 appData。我最终没有解决将其转换为小写的部分，所以我只是将所有文件名都设为小写。

要在您的计算机上找到您应该放置文件的路径，您可以查看以下调用的结果:

app.getPath('userData')

这是我的 public/electron.js 文件中的相关代码:

  protocol.registerFileProtocol('poster', (request, callback) => {
          const url = request.url.substr(9,request.url.length -10)
          callback({path: app.getPath('userData')+'/posters/'+url})
        }, (error) => {
          if (error) console.error('Failed to register protocol')
        })

  }

  protocol.registerStandardSchemes(['poster'])

在我的 React 代码中，现在只需在我的图片标签中的文件名前加上“poster://”前缀，这样图片标签看起来像:

<img src='poster://poster1.jpg/>