Electron：如何从 appdata 提供文件答案

【问题标题】：Electron: how to serve files from appdataElectron：如何从 appdata 提供文件
【发布时间】：2018-03-17 14:34:58
【问题描述】：

我觉得这是一个非常基本的问题，但我已经研究了好几个小时，而且似乎在围绕答案旋转。我有一个电子应用程序，我也使用了 create-react-app 。我在电子应用程序的 appData 文件夹中有图像文件，我希望能够使用 img 标签在渲染器中显示它们（使用反应）。

我似乎无法弄清楚如何做到这一点。对 img src 使用绝对路径和 file:// 不起作用。我也尝试注册一个自定义协议，但似乎无法让它工作，我只是不断地找不到文件（见下文）。任何想法或链接将不胜感激。

  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'/>

【问题讨论】：

我现在已经搞定了，我应该使用 'userData' 而不是 'appData'。问题是协议似乎将我作为 src 传入的 url 转换为小写，然后与文件名不匹配。
你有没有让这个工作正常？我正在尝试做同样的事情，我得到了一堆将在 userdata 文件夹中的图像和一个应该加载它们的反应应用程序。我尝试像你一样注册一个协议，但我一定错过了很多样板，因为我无法让它工作。你有你在某处尝试的完整例子吗？
我确实让它使用小写文件名。我在下面给出了答案。我没有将这个项目发布到 github 或其他任何东西，但就样板而言，我相信我遵循了这个 (flaviocopes.com/react-electron) 教程。下面我在 public/electron.js 中的代码将进入教程的 src/start.js 文件，我一定在某个时候重新组织了我的代码中的文件结构。希望这会有所帮助。
谢谢，我回家后看看。我放弃了样板方法，转而使用 electron-forge electronforge.io 这开箱即用，在升级 react-template 中的所有包之后需要进行一些调整。但图像立即显示，没有太多花哨的干预。一个简单的样板开始将是我首选的解决方案，而不是 CLI 工具

标签： javascript reactjs electron

【解决方案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'])

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

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

【讨论】：