0

If the url() function in CSS is called without any parameters, does it send a request to the page's URL?

I am building an angular app and I have the following, rather naive code in my partial:

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

When the app loaded, I noticed that there was a call being made to my page's URL causing my server-side handlers to fire some analytics events incorrectly.

From my observation, I saw this behavior on Chrome & Firefox. However, I am not able to locate any documentation which states the behavior of the url() function when no argument is passed.

Please let me know if this is the correct behavior or if I am missing something.

codematix
  • 1,317
  • 1
  • 16
  • 30

2 Answers2

2

As described by W3, the url() function expects a string as a parameter. Here in your case $scope.image_url was resolved to an empty string, which is a legal Relative URL, so browser will try to resolve this to a full URL, which in your case is base_url + ''.

You can verify that by change $scope.image_url = '1', then you can see one request to http://yourdomain/1.

To prevent this I would suggest you to create a fallback directive to show a default image if you don't have a image for this record, see this stackoverflow answer for more details

Community
  • 1
  • 1
lastr2d2
  • 3,604
  • 2
  • 22
  • 37
0

I think he's resolving your empty bind as url(undefined).. So He'll try to resolve the URL http://<domain>/path/to/your/page/undefined .

Do you initialize scope.image_url on page load?

To prevent this, I suggest to bind the entire style attribute, and not only the url() ... If there is no "empty" url(), I think it won't load a random request... Or if the background is only static, use CSS classes instead of style attribute...

Vincent
  • 1,016
  • 6
  • 11