javascript - 为什么我的CSS背景图像无法加载到 Electron 中？

Question

我正在开发一个 Electron 封装的React应用程序，该应用程序必须从互联网上下载其内容。然后，该内容将存储在数据文件夹中。在大多数情况下，它工作正常。我必须注意正确设置我的URL，否则当我在Windows和Mac之间移动时，URL会中断，但是只要花一点时间和精力，我就可以使其同时在两者上运行。

刚才所有事情都崩溃了，因为我需要使用图像作为背景。我的代码在Mac上可以100％正常运行，在Windows上可以中断。我已经验证了我的代码的输出，它正在生成到相关文件的有效路径。我什至可以将其复制并粘贴到浏览器中，然后背景图像加载就很好了。出于某种原因，css代码正在处理结果-我确实的意思是“处理”，去除斜线，创建怪异的转义符，在奇怪的地方插入垃圾字符。当我使用调试器时，可以看到带有有效URL的console.log()输出，以及当浏览器尝试完全获取另一个URL时看到的404错误。您可以看到它最初是目标URL，但是它已经以我不了解的方式进行了转换。

以下代码已大大简化-例如，在path.join()调用中不包含我的应用程序的实际目录结构。

var fullPath = path.join(AppDataFolder, 'stuff', filename)
var url = url.format({ pathname: fullPath, protocol: 'file', slashes: true })
//Url, if printed, is file:///c:\app\data\dir\rental\file.suffix -- the right output
<div style={{ backgroundImage: `url(${url})` }}>
</div>
//Use the debugger on the result above, and you get an error 404ing on:
//file:///C:/appdatadir%E3%89%83%0garbagefilesuffix

如果我将目标放到图像标签 <img src={target} />中，则在Windows和Mac上都可以正常工作。

我究竟做错了什么？我该如何解决？

Answer 1

在reactjs中，我们应该在Camel情况下使用CSS属性。

<div style={{ backgroundImage: `url(${url})` }}>

引用: https://reactjs.org/docs/dom-elements.html#style