바닐라 JS 원격 이미지가 있는지 확인하십시오. 그렇지 않으면 fallback을 사용 하시겠습니까?

Question

var 소스는 존재하는지 확인하고 그렇지 않은 경우 서버에있는 로컬 이미지로 바꿀 수 있습니다 (예 : "/images/default.jpg")?

(function() { 
      var youtube = document.querySelectorAll(".youtube"); 
       for (var i = 0; i < youtube.length; i++) 
       { 
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; 
        var image = new Image(); 
        image.src = source; 

        image.addEventListener("load", function() { 
         youtube[ i ].appendChild(image); 
        }(i)); 

        youtube[i].addEventListener("click", function() { 
         var iframe = document.createElement("iframe"); 
           iframe.setAttribute("frameborder", "0"); 
           iframe.setAttribute("allowfullscreen", ""); 
           iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1"); 
           this.innerHTML = ""; 
           this.appendChild(iframe); 
        });  
       }; 
     })(); 

Answer 1

대부분의 브라우저는 onerror 이벤트 처리기를 지원합니다.

이 같은 https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

뭔가 당신을 도울 수있는 참조하십시오?

var image = new Image(); 
image.onerror = function(e) { 
    debugger; 
    console.log("Change image src here?"); 
    this.src = "https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";} 
image.src = source; 

Answer 2

보십시오 이미지의 완전하고 naturalWidth 확인 : 누락 이미지를 처리하기위한 onError 이벤트를 사용하는 경우 https://stereochro.me/ideas/detecting-broken-images-js

Answer 3

이 당신을 위해 작동합니다을 src

<img src="main_img.png" onError="this.onerror=null;this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnT0jIkNanmzaS2TOjWqrH5zrqujijvxq1v2slPomCcquR9MSVg'" />

그래서 필요한 이미지가 종료하지 않을 경우 기본 이미지 (예 : "/images/default.jpg")로 바뀝니다. 따라서이 경우