URL-адрес страницы запроса встроенной функции CSS url ()

Question

URL-адрес страницы запроса встроенной функции CSS url ()

0

Если функция url() в CSS вызывается без каких-либо параметров, отправляет запрос на URL-адрес страницы?

Я создаю угловое приложение, и у меня есть следующий, довольно наивный код в моем частичном:

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

Когда приложение загрузилось, я заметил, что был вызван мой URL-адрес страницы, заставляя обработчики на стороне сервера некорректно запускать некоторые события аналитики.

По моим наблюдениям, я видел это поведение в Chrome & Firefox. Однако я не могу найти какую-либо документацию, в которой указано поведение функции url() когда аргумент не передается.

Пожалуйста, дайте мне знать, если это правильное поведение или я что-то упускаю.

codematix 20 апр. 2016, в 11:53

Источник

Теги:

html

angularjs

css

2 ответа

0

Я думаю, что он разрешил вашу пустую привязку как url(undefined). Поэтому он попытается разрешить URL-адрес http://<domain>/path/to/your/page/undefined.

Вы инициализируете scope.image_url при загрузке страницы?

Чтобы предотвратить это, я предлагаю связать весь атрибут стиля, а не только url()... Если нет "пустого" url(), я думаю, что он не будет загружать случайный запрос... Или, если фон только статический, используйте классы CSS вместо атрибута style...

Vincent 20 апр. 2016, в 07:13

Ещё вопросы

lastr2d2 · Accepted Answer · 2016-04-20T08-25-00.000Z

Как описано W3, функция url() ожидает строку как параметр. Здесь в вашем случае $scope.image_url был разрешен пустая строка, которая является юридическим относительным URL-адресом, поэтому браузер попытается разрешить это до полного URL-адреса, который в вашем случае - base_url + ''.

Вы можете проверить, что, изменив $scope.image_url = '1', вы можете увидеть один запрос на http://yourdomain/1.

Чтобы этого избежать, я предложил бы создать fallback директиву для отображения изображения по умолчанию, если у вас нет изображения для этой записи, см. qaru.site/questions/354913/... для получения более подробной информации