CSS背景图片相对路径var()在Safari上无法加载图片

Question

不确定是否有人遇到过这个问题（我看到了类似但不完全相同的问题），但在Mac OSX Safari浏览器中，当您使用相对图像位置的变量作为background-image时，会出现以下问题：它无法加载。

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

以下是一个存在此问题的项目示例： https://codepen.io/alexbernotas/pen/dypLKvR

正如您所看到的，在左上角的蓝色区域之上的图像无法加载，但在Firefox和Chrome中却没有任何问题，有任何想法吗？

检查过：

• Mac OS 11.2.1
• Safari 14.0.3

我知道如果使用完整的图像路径URI，则可以解决此问题，但我需要相对文件路径正常工作

---

编辑:

一个更简单的示例： https://codepen.io/alexbernotas/pen/abpbVeG

- Alex

---

PNG图片一定加载不了吗？你能否提供一个简单的代码片段来展示问题？因为当我在背景图像变量中尝试使用"../../file.jpg"时，在Safari 14.4（IOS）下它可以工作，但是我在你提供的链接网站上看不到这张图片。 - A Haworth

@AHaworth，我添加了一个更简单的示例来复制问题，请在上面的“EDIT”下面查看链接。 - Alex

谢谢，我现在可以在Safari（IOS）下看到问题了。 - A Haworth

这看起来像是Safari的一个bug。如果我们使用background-image: url(../../images/logo-icon2a.png);，它可以正确地获取图片，也就是说能够找到正确的文件夹，但如果是一个变量就不行了。你有看到任何错误吗？我不确定该建议什么。 - A Haworth

嗨@AHaworth，控制台中没有看到任何错误，是的，我注意到如果直接输入路径它是可以的，但作为变量时会失败 :/ - Alex

Answer 1

这似乎是Safari的一个bug - 在IOS Safari (14.4)中也出现过。

我找到的唯一解决方法是使用background-image语句。

background-image: var(--lb3-widget-icon);

在主代码文件的样式元素中（将png定位到正确的相对位置），变量仍然可以在CSS文件中设置。

显然这并不理想，但是这意味着您仍然可以使用带有相对文件夹路径的CSS变量来选择图像，虽然这意味着图像文件夹必须移动。

- A Haworth

---

没错，我们得出了相同的结论。如果您将CSS文件移动到图像目录的位置或将图像移动到托管CSS文件的完全相同的目录中，则此问题将得到解决，因为Safari不喜欢“../../”在涉及CSS变量时上升一级或几个级别。除了保持我们公开可用的小部件的相同结构外，我们还决定使用SCSS变量来代替图像路径，因为这样可以使我们保留文件夹结构，而这只需要进行最小的更改工作。 - Alex

Answer 2

我也遇到了完全相同的 bug。感谢您写出来！

说实话，我在我的 .htaccess 文件中添加了一个重定向规则，作为一种愚蠢但有效的临时解决方案：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*/(images/bg_.+\.png) real/path/$1 [L,QSA]

这将把所有无效前缀的 images/bg_XXX.png 请求重定向到正确路径 real/path/images/bg_XXX.png。

- Nils