Javascript Electron：如何从appdata服务文件

我觉得这是一个非常基本的问题，但我已经思考了几个小时，似乎在绕着答案转。我有一个电子应用程序，我也在上面使用了CreateReact应用程序。我在electron应用程序的appData文件夹中有图像文件，我希望能够使用img标记在渲染器中显示它们（使用react）

我似乎不知道该怎么做。为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。我没有解决转换成小写的问题，所以我把所有的文件名都改成了小写

要查找计算机上放置文件的路径，请查看调用的结果：

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

我现在已经可以使用了，我应该使用“userData”而不是“appData”。问题是，协议似乎将我作为src传入的url转换为小写，而小写与文件名不匹配。您是否曾经正确地使用过这种方法？我也在尝试着做同样的事情，我得到了一堆图片，这些图片将放在userdata文件夹中，还有一个react应用程序，应该可以加载它们。我试着像你一样注册一个协议，但我肯定错过了很多样板文件，因为我无法让它工作。你有你尝试的完整例子吗？我确实用小写文件名得到了它。我在下面给出了答案。我没有将这个项目发布到github或其他任何地方，但在样板方面，我相信我遵循了这个（）教程。我在public/electron.js中的以下代码将进入教程的src/start.js文件，我一定在某个时候重新组织了代码中的文件结构。希望这能帮点忙。谢谢。我回家后会看看的。我放弃了样板方法，转而使用electron forge，这是一种开箱即用的方法，它需要在升级react模板中的所有包之后进行一些调整。但是，图像立即显示，没有太多花哨的干预。不过，与CLI工具相比，我更喜欢从简单的样板开始