Руководства›Картинки с других доменов

Картинки с других доменов

Если картинка лежит на другом домене, например на CDN, стекло может не прочитать её и перейти на CSS. Ничего не сломалось: так браузеры защищают людей.

Почему это происходит

Без этого правила любой сайт мог бы загрузить чужую закрытую картинку и прочитать её. Поэтому чтобы читать пиксели с другого домена, этот домен должен согласиться. Согласие это заголовок CORS.

Как понять

Стекло превращается в обычное размытие, а в консоли появляется предупреждение, что фон не читается.

Исправьте на сервере

Попросите сервер с картинкой отдавать этот заголовок. У большинства CDN и хранилищ для этого есть настройка.

Access-Control-Allow-Origin: *

Затем запросите это в теге

Картинке на странице тоже нужен crossorigin, иначе браузер загрузит её по-старому.

<img src="https://cdn.example.com/photo.jpg" crossorigin="anonymous" alt="">

Или обойдите проблему

Отдавайте картинку со своего домена. Тот же домен, никакого CORS.