再次内联 CSS url() 函数请求页面 URL答案

【问题标题】：Inline CSS url() function request page URL again再次内联 CSS url() 函数请求页面 URL
【发布时间】：2016-04-20 18:06:28
【问题描述】：

如果 CSS 中的 url() 函数在没有任何参数的情况下被调用，它是否会向页面的 URL 发送请求？

我正在构建一个有角度的应用程序，我的部分代码中有以下相当幼稚的代码：

<div style="background-image: url({{scope.image_url}});">
  {{scope.message_text}}
</div>

当应用加载时，我注意到有人对我的页面 URL 进行了调用，导致我的服务器端处理程序错误地触发了一些分析事件。

根据我的观察，我在 Chrome 和 Firefox 上看到了这种行为。但是，我无法找到任何说明url() 函数在未传递参数时的行为的文档。

请让我知道这是正确的行为还是我遗漏了什么。

【问题讨论】：

【解决方案1】：

如by W3 所述，url() 函数需要一个字符串作为参数。在您的情况下，$scope.image_url 被解析为一个空字符串，这是一个合法的Relative URL，因此浏览器将尝试将其解析为一个完整的 URL，在您的情况下是 base_url + ''。

您可以通过更改$scope.image_url = '1' 来验证，然后您可以看到对http://yourdomain/1 的一个请求。

为了防止这种情况，如果您没有此记录的图像，我建议您创建一个fallback 指令以显示默认图像，请参阅this stackoverflow answer 了解更多详细信息

【讨论】：

【解决方案2】：

我认为他将您的空绑定解析为 url(undefined).. 所以他会尝试解析 URL http://<domain>/path/to/your/page/undefined。

您是否在页面加载时初始化scope.image_url？

为了防止这种情况，我建议绑定 entire 样式属性，而不仅仅是url() ...如果没有“空”url()，我认为不会加载随机请求...或者如果背景只是静态的，请使用 CSS 类而不是 style 属性...

【讨论】：