|
Сообщение от biryukovm
|
|
img_dostyp = '';
|
Зачем вам подмена типов? В чём прикол изменения представителя класса HTMLImageElement на представителя класса String?
Вы можете использовать только стили (ошибки в консоли остаются) для того, чтобы изменить вид сломанной картинки... (Почему бы сразу не писать src вместо avatar-src?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style="max-width: 500px; margin: auto;">
<img src="https://picsum.photos/id/1014/100/100">
<img src="https://picsum.photos/id/1027/100/100">
<img src="https://picsum.photos/id/203/100/100">
<img src="https://picsum.photos/id/error-1">
<img src="https://picsum.photos/id/319/100/100">
<img src="https://picsum.photos/id/error-2">
<img src="https://picsum.photos/id/259/100/100">
<img src="https://picsum.photos/id/error-3">
<img src="https://picsum/error-4/">
<img src="https://picsum.photos/id/334/100/100">
<img src="https://picsum.photos/id/775/100/100">
<img src="https://picsum.photos/id/777/100/100">
<style>
img {
position: relative;
width: 100px;
height: 100px;
}
img::before {
content: url("https://picsum.photos/id/669/100/100");
position: absolute;
}
</style>
</body>
</html>
Если вам не нужны, ошибки в консоли, то вы можете использовать Service Worker... вот код sw.js
addEventListener("fetch", event => {
if(event.request.destination === "image") {
event.respondWith(
fetch(event.request.url)
.then(response => response.ok ? response : Promise.reject())
.catch(() => fetch("https://picsum.photos/id/669/100/100"))
);
}
});
Если загружается ресурс для картинки, то в случае удачного скачивания им и ответим, в противном случае сделаем запрос для замещающей картинки.
Вот его регистрация... (app.js)
const scriptURL = new URL("sw.js", location);
const scriptURLHasRegistered = navigator.serviceWorker.getRegistrations().then(registrations => {
for(const { active } of registrations)
if(active.scriptURL === scriptURL.href) return true;
return false;
});
navigator.serviceWorker
.register(scriptURL)
.then(() => scriptURLHasRegistered)
.then(ok => { if(!ok) location.reload(); })
;
Поскольку картинки начинают загружаться раньше, чем успеет установиться SW, то мы перезагружаем страницу, чтобы все URL прошли через SW, когда он уже установлен!
Вот код целиком...
https://plnkr.co/edit/JtPlmS4TcP4JpnYdBCde?p=preview
