Question

我觉得这是一个基本的问题，但我已经在这里待了几个小时，似乎在回答问题。我有一个电子应用程序，我也使用了create-react-app。我在电子应用程序的appData文件夹中有图像文件，我希望能够使用img标签在渲染器中显示它们（使用react）。

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

  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'])

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

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

电子：如何从appdata提供文件

1 个答案: