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

Question

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

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

以下代码已大大简化——例如，它不包括我的应用在 path.join() 调用中的 actually 目录结构。

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

Answer 2

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

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

看看能不能解决你的问题？

因为不工作是图像没有显示给你还是浏览器的网络选项卡真的显示它 ping 那个奇怪的 URL 并返回 404？因为您可能只是 CSS 问题，例如所需的宽度和高度。

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

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