为什么我的CSS背景图像没有在电子中加载?

Question

我正在开发一个用电子打包的反应应用程序，它必须从互联网上下载它的内容。 然后，该内容将存储在数据文件夹中。 大多数时候，这工作得很好。 我必须注意正确设置我的 URL，否则当我在 Windows 和 Mac 之间移动时它会中断，但只要有一点时间和注意力，我就可以让它在两者上工作。

刚才这一切都戛然而止，因为我需要使用图像作为背景。 我的代码在 Mac 上 100% 运行良好，在窗口上中断。 我已经验证了我的代码输出，它正在生成相关文件的有效路径。 我甚至可以将其复制并粘贴到浏览器中，背景图像加载得很好。 出于某种原因，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:appdatadirrentalfile.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

Answer 2

我们需要更多信息来查看 url 编码问题是否真的是您遇到的问题。你会尝试像这样加双引号吗

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

看看这是否能解决你的问题？

对于不起作用，图像没有为您显示，或者浏览器的网络选项卡真的显示它ping那个奇怪的URL并返回404？ 因为您可能只是需要宽度和高度之类的CSS问题。

<div style={{ backgroundImage: `url("${url}")`, width: 40, height:40 }}>

我想你提到你简化了你的代码，所以这可能不是问题，而只是检查......我这里有一台 mac，因此将图像引用到文件系统与 PC 中的不同，因此无法重现相同的问题。但是您可能要检查的另一件事是权限问题，因为不确定什么托管您的反应应用程序(节点？