Question

如果var源存在，如何检查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事件处理丢失的图片src

，这应该对您有用

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

因此，如果您所需的图像没有退出，那么它将被默认图像替换，例如“/images/default.jpg”，因此在您的情况下替换此this.src属性，如this.src="/images/default.jpg" < / p>

Answer 2

大多数浏览器都支持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 3

尝试检查图像的完整和自然宽度： https://stereochro.me/ideas/detecting-broken-images-js

Vanilla JS检查是否存在远程图像，否则使用回退？

3 个答案: