여러 이미지가 포함 된 웹 페이지가 있습니다. 때로는 이미지를 사용할 수 없으므로 클라이언트 브라우저에 깨진 이미지가 표시됩니다.

jQuery를 사용하여 이미지 세트를 가져 와서 깨진 이미지로 필터링 한 다음 src를 바꾸려면 어떻게합니까?

--jQuery로이 작업을 수행하는 것이 더 쉬울 것이라고 생각했지만 순수한 JavaScript 솔루션, 즉 Prestaul에서 제공하는 솔루션을 사용하는 것이 훨씬 더 쉽다는 것이 밝혀졌습니다.

onErrorJavaScript를 사용하여 이미지가 소스를 다시 할당 하도록 이벤트를 처리하십시오 .

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

또는 JavaScript 함수가없는 경우 :

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

다음 호환성 표는 오류 기능을 지원하는 브라우저를 보여줍니다.

http://www.quirksmode.org/dom/events/error.html

나는 내장 사용하십시오 error핸들러 :

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

편집 : 이 error()방법은 jquery 1.8 이상에서 더 이상 사용되지 않습니다 . 대신 사용해야하는 .on("error")대신 :

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

나 같은 경우 사람의 연결을 시도에서 error동적 HTML을의에 이벤트 img태그를, 나는 캐치가 있음을 지적하고 싶습니다 :

명백히 img오류 이벤트 는 표준에서 말하는 것과 달리 대부분의 브라우저에서 버블 링되지 않습니다 .

따라서 다음과 같은 것이 작동하지 않습니다 .

$(document).on('error', 'img', function () { ... })

이것이 다른 사람에게 도움이되기를 바랍니다. 이 스레드에서 이것을 보았 으면 좋겠습니다. 그러나 나는하지 않았다. 그래서 나는 그것을 추가하고 있습니다

독립형 솔루션은 다음과 같습니다.

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

나는 이것이 당신이 추구 하는 것이라고 믿습니다 : jQuery.Preload

데모의 예제 코드는 다음과 같습니다. 로딩 및 찾을 수없는 이미지를 지정하면 모든 설정이 완료됩니다.

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

출처 : http://www.developria.com/2009/03/jquery-quickie---broken-images.html

OP가 SRC를 대체하려고 시도하는 동안이 질문에 부딪힌 많은 사람들이 깨진 이미지를 숨기고 싶을 것입니다. 이 경우이 간단한 솔루션이 저에게 효과적이었습니다.

인라인 JavaScript 사용 :

<img src="img.jpg" onerror="this.style.display='none';" />

외부 자바 스크립트 사용 :

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}

<img src='img.jpg' />

최신 외부 JavaScript 사용 :

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});

<img src='img.jpg' />

NoteList.forEach 및 화살표 기능에 대한 브라우저 지원을 참조하십시오 .

깨진 이미지를 모두 대체하는 빠르고 더러운 방법이 있으며 HTML 코드를 변경할 필요가 없습니다.)

코드 펜 예제

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

필요에 맞는 스크립트를 찾을 수 없으므로 깨진 이미지를 확인하고 수정 될 때까지 4 초마다 다시로드하는 재귀 함수를 만들었습니다.

이미지가로드되지 않은 것처럼 이미지를 서버에 없을 수 있으며 함수가 무한 루프에 들어가는 것처럼 10 회 시도로 제한했습니다. 그래도 여전히 테스트 중입니다. 그것을 조정 주시기 바랍니다 :)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});

이것은 엉터리 기술이지만 거의 보장됩니다.

<img ...  onerror="this.parentNode.removeChild(this);">

이를 위해 GitHub의 자체 페치를 사용할 수 있습니다.

프론트 엔드 : https://github.com/github/fetch
또는 Node.js 버전 인 백엔드 : https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

편집 :이 방법은 XHR을 대체 할 것이며 이미 Chrome에있을 것입니다. 앞으로이 내용을 읽는 사람에게는 앞서 언급 한 라이브러리가 필요하지 않을 수도 있습니다.

이것은 JavaScript이며, 크로스 브라우저와 호환 가능해야하며 못생긴 마크 업없이 제공됩니다 onerror="".

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

코덱 :

보다 나은 통화

jQuery(window).load(function(){
    $.imgReload();
});

를 사용할 document.ready필요는 없기 때문에 이미지가로드되고 HTML 만로드됩니다. 따라서 지연된 통화가 필요하지 않습니다.

CoffeeScript 변형 :

때로는 이미지가 실제로 있지만 Firefox에서 .error () 메소드가 발생하는 터보 링크 문제를 해결했습니다.

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)

Prestaul의 답변 을 사용하여 몇 가지 검사를 추가했으며 jQuery 방식을 선호합니다.

<img src="image1.png" onerror="imgError(this,1);"/>
<img src="image2.png" onerror="imgError(this,2);"/>

function imgError(image, type) {
    if (typeof jQuery !== 'undefined') {
       var imgWidth=$(image).attr("width");
       var imgHeight=$(image).attr("height");

        // Type 1 puts a placeholder image
        // Type 2 hides img tag
        if (type == 1) {
            if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
                $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
            } else {
               $(image).attr("src", "http://lorempixel.com/200/200/");
            }
        } else if (type == 2) {
            $(image).hide();
        }
    }
    return true;
}

imgwith을 다음 과 innerHTML같이 삽입 한 경우 다음 과 같이 $("div").innerHTML = <img src="wrong-uri">실패하면 다른 이미지를로드 할 수 있습니다.

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

왜 javascript: _필요한가요? 스크립트 태그를 통해 DOM에 삽입 된 스크립트 innerHTML는 삽입시 실행되지 않으므로 명시 적이어야합니다.

이 다른 게시물을 보면서이 게시물을 찾았 습니다 . 아래는 내가 준 답변의 사본입니다.

나는 이것이 오래된 스레드라는 것을 알고 있지만 React가 인기를 얻었으며 아마도 React를 사용하는 누군가가 같은 문제에 대한 답을 찾기 위해 여기에 올 것입니다.

따라서 React를 사용하는 경우 아래에서 React 팀의 Ben Alpert가 제공 한 답변과 같은 작업을 수행 할 수 있습니다.

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

"onerror"이벤트를 사용하여 깨진 이미지를 대체하기 위해 바이올린 을 만들었습니다 . 도움이 될 수 있습니다.

    //the placeholder image url
    var defaultUrl = "url('https://sadasd/image02.png')";

    $('div').each(function(index, item) {
      var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
      $('<img>', {
        src: currentUrl
      }).on("error", function(e) {
        $this = $(this);
        $this.css({
          "background-image": defaultUrl
        })
        e.target.remove()
      }.bind(this))
    })

다음은 JQuery로 래핑 된 HTML5 Image 객체를 사용하는 예입니다. 기본 이미지 URL에 대해로드 기능을 호출하고로드로 인해 오류가 발생하면 이미지의 src 속성을 백업 URL로 바꾸십시오.

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id="myImage" src="primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>

순수한 JS. 내 작업은 : 이미지 'bl-once.png'가 비어있는 경우-> 현재 dir의 배열 목록에서 첫 번째 이미지 (404 상태가 아닌) 이미지를 삽입하십시오.

<img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)">

어쩌면 개선해야 할 수도 있지만 :

var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
    var path;
    var imgNotFounded = true; // to mark when success

    var replaceEmptyImage = {
        insertImg: function (elem) {

            if (srcToInsertArr.length == 0) { // if there are no more src to try return
                return "no-image.png";
            }
            if(!/undefined/.test(elem.src)) { // remember path
                path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
            }
            var url = path + "/" + srcToInsertArr[0];

            srcToInsertArr.splice(0, 1); // tried 1 src

            
                if(imgNotFounded){ // while not success
                    replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
                }
            

        },
        getImg: function (src, path, elem) { // GET IMAGE

            if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
                
                var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
                var name = pathArr[pathArr.length - 1]; // "needed.png"

                xhr = new XMLHttpRequest();
                xhr.open('GET', src, true);
                xhr.send();

                xhr.onreadystatechange = function () {

                    if (xhr.status == 200) {
                        elem.src = src; // insert correct src
                        imgNotFounded = false; // mark success
                    }
                    else {
                        console.log(name + " doesn't exist!");
                        elem.onerror();
                    }

                }
            }
        }

    };

따라서 현재 dir의 src 또는 'no-image.png'에 올바른 'needed.png'를 삽입합니다.

더 좋은 방법이 있는지 확실하지 않지만 얻을 수있는 해킹을 생각할 수 있습니다 .Ajax가 img URL에 게시하고 응답을 구문 분석하여 이미지가 실제로 돌아 왔는지 확인할 수 있습니다. 404 또는 다른 것으로 돌아온 경우 img를 교체하십시오. 비록 이것이 느릴 것으로 기대하지만.

이 두 가지 간단한 기능으로 문제를 해결했습니다.

function imgExists(imgPath) {
    var http = jQuery.ajax({
                   type:"HEAD",
                   url: imgPath,
                   async: false
               });
    return http.status != 404;
}

function handleImageError() {
    var imgPath;

    $('img').each(function() {
        imgPath = $(this).attr('src');
        if (!imgExists(imgPath)) {
            $(this).attr('src', 'images/noimage.jpg');
        }
    });
}

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

참고

나는 이벤트 위임 및 이벤트가 캡처와 더 우아한 방법이 생각 window의 error백업 이미지로드에 실패 할 경우에도.

img {
  width: 100px;
  height: 100px;
}

<script>
  window.addEventListener('error', windowErrorCb, {
    capture: true
  }, true)

  function windowErrorCb(event) {
    let target = event.target
    let isImg = target.tagName.toLowerCase() === 'img'
    if (isImg) {
      imgErrorCb()
      return
    }

    function imgErrorCb() {
      let isImgErrorHandled = target.hasAttribute('data-src-error')
      if (!isImgErrorHandled) {
        target.setAttribute('data-src-error', 'handled')
        target.src = 'backup.png'
      } else {
        //anything you want to do
        console.log(target.alt, 'both origin and backup image fail to load!');
      }
    }
  }
</script>
<img id="img" src="error1.png" alt="error1">
<img id="img" src="error2.png" alt="error2">
<img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">

요점은 :

1. 코드를에 head넣고 첫 번째 인라인 스크립트로 실행하십시오. 따라서 스크립트 다음에 발생하는 오류를 듣습니다.

2. 이벤트 캡처를 사용하여 특히 거품이없는 이벤트의 경우 오류를 포착하십시오.

3. 각 이미지에서 바인딩 이벤트를 피하는 이벤트 위임을 사용하십시오.

4. 아래와 같이 무한 루프가 사라지지 않도록하기 위해 error img요소에 속성을 제공 backup.png하십시오 backup.png.

img error-> backup.png-> error-> backup.png-> error-> ,,,,,

;(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
    return this.one('error', function () {
        var self = this;
        this.src = (fallback || 'http://lorempixel.com/$width/$height')
        .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; });
    });
};

자리 표시 자 경로를 전달하고 $*다음을 통해 실패한 이미지 객체의 모든 속성에 액세스 할 수 있습니다 .

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

이것은 몇 년 동안 저를 좌절 시켰습니다. 내 CSS 수정은에 배경 이미지를 설정합니다 img. 동적 이미지 src가 포 그라운드로로드되지 않으면 자리 표시자가 img의 bg 에 표시됩니다 . 이미지는 기본 크기가 경우에 작동합니다 (예를 들어 height, min-height, width및 / 또는 min-width).

깨진 이미지 아이콘이 표시되지만 개선되었습니다. IE9까지 성공적으로 테스트되었습니다. iOS Safari 및 Chrome에는 깨진 아이콘조차 표시되지 않습니다.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

약간의 애니메이션을 추가하여 src배경 깜박임없이로드 할 시간 을 제공하십시오 . Chrome은 백그라운드에서 부드럽게 사라지지만 데스크탑 Safari는 그렇지 않습니다.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;                     
}

@-webkit-keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

이미지를로드 할 수없는 경우 (예 : 제공된 URL에없는 이미지) 이미지 URL이 기본값으로 변경됩니다.

.error () 에 대한 자세한 내용

$('img').on('error', function (e) {
  $(this).attr('src', 'broken.png');
});

나는 같은 문제를 겪었다. 이 코드는 내 경우에 잘 작동합니다.

// Replace broken images by a default img
$('img').each(function(){
    if($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});

error콘솔, 북마크릿 또는 비동기 적으로로드 된 스크립트를 통해 코드를 실행할 때와 같이 이미로드 된 페이지에서 무언가를 수행하려고하기 때문에 이벤트를 사용하는 것이 불가능한 경우가 있습니다. 이 경우 다음 사항을 확인 img.naturalWidth하고 img.naturalHeight0이 트릭을 할 것입니다.

예를 들어 콘솔에서 깨진 이미지를 모두 다시로드하는 스 니펫은 다음과 같습니다.

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}

이미지가 처음로드되지 않으면 DOM에서 완전히 제거됩니다. console.clear()try / catch 블록으로 404 오류를 생략 할 수 없으므로 실행 하면 콘솔 창을 깨끗하게 유지합니다.

$('img').one('error', function(err) {
    // console.log(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})