Chrome显示通过URL与自定义属性连接的所有媒体，但Safari不加载它们

Question

当您在后台使用自定义属性时，Safari以另一种方式解释图像的url，例如：

​

Chrome显示所有图像，但Safari日志“不允许加载本地资源”

另一个例子是：

Chrome并不能显示所有的图像，但是Safari运行得很好

问题在于方向，我不知道为什么，但是当您使用自定义属性并为背景图像设置url时，safari在文件的路径上增加了一步，另一个词添加了“”。

我试图解决这个问题，只为Safari创建另一个带有自定义道具的文档，当JS检测到Safari时，它会用自定义道具切换css文档，但它也不能很好地工作，因为safari开始显示图像--dat很酷，但是当我打开暗模式时它不会刷新新的图像(这就是我开始所有操作的原因)。

此外，您还可以在这里找到一个很好的例子：https://github.com/rudensergey/testChromeSafari

我的项目，在这里我坚持这个问题：https://github.com/rudensergey/darkroom

我期待下一个:我有带有图像的伪对象(我将它们设置为带有URL的背景图像)，而不是背景图像的URL，例如我使用自定义的prop (--pucture)。

之后，当我想将我的网站切换到黑暗主题的JS时，会重写自定义的螺旋桨()和新的图像，但是.

Answer 1

我把你的:root改为：

:root {
    /* Images are in the same directory */

    /* this path works in Chrome */
    --path-to-image-one: url(../media/1.png);
    /* this path works in Safari */
    --path-to-image-two: url(../media/2.jpg);
}

对我来说这两种方法都适用--见屏幕截图

​

​