jQuery를 / 자바 스크립트가 깨진 이미지를 교체

해결법

1.자바 스크립트를 사용하여 소스를 재 할당하기 위해 이미지에 대한의 OnError 이벤트를 처리 :

자바 스크립트를 사용하여 소스를 재 할당하기 위해 이미지에 대한의 OnError 이벤트를 처리 :
```
function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}
```
```
<img src="image.png" onerror="imgError(this);"/>
```
아니면 자바 스크립트 기능이없는 :
```
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />
```
다음 호환성 표 오류 기능을 지원하는 브라우저 :

http://www.quirksmode.org/dom/events/error.html
2.나는 오류 처리기에 내장 된 사용 :

나는 오류 처리기에 내장 된 사용 :
```
$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});
```
편집 : 오류 () 메소드가 JQuery와 1.8 이상에서 사용되지 않습니다. 대신, 대신 ( "오류") CSTE 연구진은 사용해야합니다 :
```
$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});
```
3.나 같은 경우 누군가가, 동적의 HTML의 img 태그에 오류 이벤트를 첨부하려고, 난 그걸 지적하고 싶습니다, 캐치가있다 :

나 같은 경우 누군가가, 동적의 HTML의 img 태그에 오류 이벤트를 첨부하려고, 난 그걸 지적하고 싶습니다, 캐치가있다 :

분명히 IMG 오류 이벤트는 표준의 말씀에 위배 대부분의 브라우저에서 거품을하지 않습니다.

그래서, 다음과 같은 작동하지 않습니다 :
```
$(document).on('error', 'img', function () { ... })
```
이것은 다른 사람에게 도움이 될 것입니다 바랍니다. 나는이 스레드에서 여기를 보았다 바랍니다. 그러나, 나는하지 않았다. 그래서, 나는 그것을 추가하고

4.다음은 독립형 솔루션입니다 :

다음은 독립형 솔루션입니다 :

$(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';
    }
  });
});

5.나는이 필요하시면 믿습니다 jQuery.Preload를

나는이 필요하시면 믿습니다 jQuery.Preload를

여기 데모에서 예제 코드, 당신은 로딩을 지정하지의 이미지를 발견하고 모든 설정이 끝난 것입니다 :
```
jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});
```

6.

$(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

7.영업 이익은 SRC를 대체하기 위해 찾고있는 동안, 나는이 간단한 해결책이 나를 위해 좋은 일을하는 경우에만 깨진 이미지를 숨길 수도 있습니다이 질문에 타격 있는지 많은 사람들을 해요.

영업 이익은 SRC를 대체하기 위해 찾고있는 동안, 나는이 간단한 해결책이 나를 위해 좋은 일을하는 경우에만 깨진 이미지를 숨길 수도 있습니다이 질문에 타격 있는지 많은 사람들을 해요.

{ img.onerror = 함수 () { this.style.display = '없음'; } });
9.이것은 엉터리 기술이지만, 거의 보장된다 :

이것은 엉터리 기술이지만, 거의 보장된다 :
```
<img onerror="this.parentNode.removeChild(this);">
```

10.내가 깨진 이미지를 확인하고 고정 될 때까지 그들에게 4 초마다 다시 시도하는 재귀 함수를했다, 그래서 나는 나의 요구에 맞게 스크립트를 찾을 수 없습니다.

내가 깨진 이미지를 확인하고 고정 될 때까지 그들에게 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);
});

11.당신은 GitHub의이에 대한 가져 오기 자신의 사용할 수 있습니다 :

당신은 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을 대체 할 것입니다 및 가정으로 이미 크롬되었습니다. 미래에이 글을 읽는 사람에게, 당신은 포함 된 상기 라이브러리를 필요로하지 않을 수 있습니다.

12.이 크로스 브라우저 호환되어야합니다, 자바 스크립트, 그리고 추한 마크 업의 OnError = ""없이 제공합니다 :

이 크로스 브라우저 호환되어야합니다, 자바 스크립트, 그리고 추한 마크 업의 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] );
}

CODEPEN :

13.사용하여 더 나은 통화

사용하여 더 나은 통화
```
jQuery(window).load(function(){
    $.imgReload();
});
```
document.ready를 사용하는 것이 필요하지 않기 때문에 이미지 만 HTML을로드하는 것을 의미한다. 따라서, 지연 호출 할 필요가 없다.
14.커피 스크립트 변형 :

커피 스크립트 변형 :

나는에는 .error () 메소드는 이미지가 정말 존재에도 불구하고 때때로 파이어 폭스에서 제기 얻을 원인 Turbolinks에 문제를 해결하기 위해 그것을했다.
```
$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)
```

15.Prestaul의 답변을 사용하여, 나는 몇 가지 검사를 추가하고 나는 JQuery와 방법을 사용하는 것을 선호합니다.

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;
}

16.이 같은 innerHTML을,와 IMG를 삽입 한 경우 : $ ( "DIV") innerHTML을 = 는, 일을 실패하면 다른 이미지를로드 할 수 있습니다 예컨대,이. :

이 같은 innerHTML을,와 IMG를 삽입 한 경우 : $ ( "DIV") innerHTML을 = 는, 일을 실패하면 다른 이미지를로드 할 수 있습니다 예컨대,이. :
```
<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">
```
왜 자바 스크립트입니다 : _needed? innerHTML을에 스크립트 태그를 통해 DOM에 주입 스크립트는 시간에 실행되지 않기 때문에 당신이 명시 적으로 그래서 그들은, 주입된다.
17.이 다른 SO 게시물을 찾고있는 동안이 게시물을 발견했다. 아래는 내가 거기에 준 대답의 복사본입니다.

이 다른 SO 게시물을 찾고있는 동안이 게시물을 발견했다. 아래는 내가 거기에 준 대답의 복사본입니다.

나는이 오래된 스레드 알지만, 같은 문제에 대한 답을 찾고, 아마도, 반작용 사용하는 사람이 여기에 올 것이다 인기를 끌고있다 반응한다.

당신 반응 사용하는 경우에 따라서, 당신은 여기에 팀 반응의 벤 알퍼트가 제공하는 응답 원래 있던 다음과 같은 무언가를 할 수있다
```
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} />;
    );
}
```

18.나는 "의 OnError"이벤트를 사용하여 깨진 이미지를 대체 할 바이올린을 만들었습니다. 이것은 당신을 도움이 될 수 있습니다.

나는 "의 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))
    })

19.여기 JQuery와에 의해 감싸 HTML5 이미지 객체를 사용하는 예입니다. 기본 이미지 URL의 부하 함수를 호출하고로드 오류가 발생하는 경우, 백업 URL로 이미지의 src 속성을 대체합니다.

여기 JQuery와에 의해 감싸 HTML5 이미지 객체를 사용하는 예입니다. 기본 이미지 URL의 부하 함수를 호출하고로드 오류가 발생하는 경우, 백업 URL로 이미지의 src 속성을 대체합니다.
```
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>
```
20.순수 JS. 내 작업이었다 'BL-once.png'이미지가 비어있는 경우 -> (현재 디렉토리에서) 배열 목록에서 이미지를 (안 404 상태가) 첫 번째 삽입 :

순수 JS. 내 작업이었다 'BL-once.png'이미지가 비어있는 경우 -> (현재 디렉토리에서) 배열 목록에서 이미지를 (안 404 상태가) 첫 번째 삽입 :

아마이 개선 될 필요가 있지만 :

VAR srcToInsertArr = 'empty2.png', 'empty1.png'needed.png ','notActual.png ']; //이 배열에서 하나 IMG에 의해 하나를 삽입하려고 VAR 경로; VAR imgNotFounded 사실 =; // 성공을 표시하는 VAR replaceEmptyImage = { insertImg : 함수 (ELEM) { 경우 (srcToInsertArr.length == 0) {// 반환을 시도하는 더 이상 SRC가없는 경우 "더-의 image.png"를 반환하지 않습니다; } (! / 미정 / .test (elem.src는)) {// 경로를 기억한다면 . 경로 elem.src.split = ( "/") 조각 (0, -1) .join ( "/"); //에 "http : // localhost를 : 63342 / 된 GetImage" } VAR의 URL + = 패스 "/"+ srcToInsertArr [0]; srcToInsertArr.splice (0, 1); // 1 SRC 시도 (imgNotFounded) {// 동안하지 성공하는 경우 replaceEmptyImage.getImg (URL, 경로, ELEM); // CALL의 GET 이미지 } }, getImg : 기능 (SRC, 경로, ELEM) {// GET 이미지 경우 (SRC && 경로 && ELEM) {// SRC = "HTTP : // 로컬 호스트 : 63342 / 된 GetImage / needed.png" VAR pathArr = src.split ( "/"); // [ "HTTP :", "", "로컬 호스트 : 63342", "된 GetImage", "needed.png"] VAR 이름 = pathArr [pathArr.length - 1]; // "needed.png" XHR = 새로운 XMLHttpRequest 객체 (); xhr.open ( 'GET', SRC, TRUE); 위해 xhr.send (); xhr.onreadystatechange = 함수 () { 경우 (xhr.status == 200) { elem.src = SRC; // 올바른 SRC 삽입 imgNotFounded = 거짓; // 마크 성공 } 다른 { CONSOLE.LOG는 (이름 + "는 존재하지 않습니다!"); elem.onerror (); } } } } };

그래서, 현재의 디렉토리에서 내 SRC 또는 '노의 image.png'정확 'needed.png'를 삽입합니다.

21.

(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/

22.이 년 동안 저를 실망하고있다. 내 CSS 수정은 IMG에서 배경 이미지를 설정합니다. 동적 이미지 SRC는 포 그라운드로로드되지 않는 경우, 자리는 IMG의 BG에 볼 수 있습니다. 이미지의 경우이 작업은 기본 크기 (예를 들어, 높이, 최소 높이, 폭 및 / 또는 분 폭)가 있습니다.

이 년 동안 저를 실망하고있다. 내 CSS 수정은 IMG에서 배경 이미지를 설정합니다. 동적 이미지 SRC는 포 그라운드로로드되지 않는 경우, 자리는 IMG의 BG에 볼 수 있습니다. 이미지의 경우이 작업은 기본 크기 (예를 들어, 높이, 최소 높이, 폭 및 / 또는 분 폭)가 있습니다.

당신은 깨진 이미지 아이콘이 표시됩니다하지만 개선입니다. 성공적으로 IE9까지 테스트. iOS의 사파리와 크롬은 심지어 깨진 아이콘이 표시되지 않습니다.
```
.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}
```
배경 깜박임없이 부하에 SRC 시간을 제공하기 위해 약간의 애니메이션을 추가합니다. 크롬 원활 백그라운드에서 페이드하지만 데스크톱 사파리하지 않습니다.
```
.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  animation: fadein 1s;                     
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
```
23.더 나은 방법이 있는지 확실하지 않습니다,하지만 나는 그것을 얻을 수있는 해킹 생각할 수 - 예 : img URL에 당신이 할 수 아약스의 게시물과 이미지가 실제로 돌아왔다 있는지 확인하기 위해 응답을 구문 분석합니다. 그것은 다시 404 또는 무언가로 온 경우, IMG을 교환합니다. 내가 기대하지만이 매우 느려질 수 있습니다.

더 나은 방법이 있는지 확실하지 않습니다,하지만 나는 그것을 얻을 수있는 해킹 생각할 수 - 예 : img URL에 당신이 할 수 아약스의 게시물과 이미지가 실제로 돌아왔다 있는지 확인하기 위해 응답을 구문 분석합니다. 그것은 다시 404 또는 무언가로 온 경우, IMG을 교환합니다. 내가 기대하지만이 매우 느려질 수 있습니다.

24.나는이 두 가지 간단한 함수 내 문제를 해결 :

나는이 두 가지 간단한 함수 내 문제를 해결 :

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');
        }
    });
}

25.jQuery를 1.8

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" );

참고

26.나는 이벤트 위임 및 백업 이미지로드에 실패 할 경우에도 윈도우의 오류에 포착 이벤트와 더 우아한 방법이 생각합니다.

나는 이벤트 위임 및 백업 이미지로드에 실패 할 경우에도 윈도우의 오류에 포착 이벤트와 더 우아한 방법이 생각합니다.

IMG { 폭 : 100 픽셀; 높이 : 100 픽셀; }

'JQUERY' 카테고리의 다른 글

[JQUERY] 요소에 텍스트를 선택 (마우스로 강조 유사) (0)	2020.09.22
[JQUERY] jQuery를 테이블 행 추가 (0)	2020.09.22
[JQUERY] 어떻게 자바 스크립트를 사용하여 이미지 크기 (높이 및 폭)을 얻으려면? (0)	2020.09.22
[JQUERY] 어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는? (0)	2020.09.22
[JQUERY] 자바 스크립트 / jQuery를 사용하여 파일 다운로드 (0)	2020.09.22

복붙노트

[JQUERY] jQuery를 / 자바 스크립트가 깨진 이미지를 교체

jQuery를 / 자바 스크립트가 깨진 이미지를 교체

해결법

1.자바 스크립트를 사용하여 소스를 재 할당하기 위해 이미지에 대한의 OnError 이벤트를 처리 :

2.나는 오류 처리기에 내장 된 사용 :

3.나 같은 경우 누군가가, 동적의 HTML의 img 태그에 오류 이벤트를 첨부하려고, 난 그걸 지적하고 싶습니다, 캐치가있다 :

4.다음은 독립형 솔루션입니다 :

5.나는이 필요하시면 믿습니다 jQuery.Preload를

6.

7.영업 이익은 SRC를 대체하기 위해 찾고있는 동안, 나는이 간단한 해결책이 나를 위해 좋은 일을하는 경우에만 깨진 이미지를 숨길 수도 있습니다이 질문에 타격 있는지 많은 사람들을 해요.

9.이것은 엉터리 기술이지만, 거의 보장된다 :

10.내가 깨진 이미지를 확인하고 고정 될 때까지 그들에게 4 초마다 다시 시도하는 재귀 함수를했다, 그래서 나는 나의 요구에 맞게 스크립트를 찾을 수 없습니다.

11.당신은 GitHub의이에 대한 가져 오기 자신의 사용할 수 있습니다 :

12.이 크로스 브라우저 호환되어야합니다, 자바 스크립트, 그리고 추한 마크 업의 OnError = ""없이 제공합니다 :

13.사용하여 더 나은 통화

14.커피 스크립트 변형 :

15.Prestaul의 답변을 사용하여, 나는 몇 가지 검사를 추가하고 나는 JQuery와 방법을 사용하는 것을 선호합니다.

16.이 같은 innerHTML을,와 IMG를 삽입 한 경우 : $ ( "DIV") innerHTML을 = 는, 일을 실패하면 다른 이미지를로드 할 수 있습니다 예컨대,이. :

17.이 다른 SO 게시물을 찾고있는 동안이 게시물을 발견했다. 아래는 내가 거기에 준 대답의 복사본입니다.

18.나는 "의 OnError"이벤트를 사용하여 깨진 이미지를 대체 할 바이올린을 만들었습니다. 이것은 당신을 도움이 될 수 있습니다.

19.여기 JQuery와에 의해 감싸 HTML5 이미지 객체를 사용하는 예입니다. 기본 이미지 URL의 부하 함수를 호출하고로드 오류가 발생하는 경우, 백업 URL로 이미지의 src 속성을 대체합니다.

20.순수 JS. 내 작업이었다 'BL-once.png'이미지가 비어있는 경우 -> (현재 디렉토리에서) 배열 목록에서 이미지를 (안 404 상태가) 첫 번째 삽입 :

21.

24.나는이 두 가지 간단한 함수 내 문제를 해결 :

25.jQuery를 1.8

26.나는 이벤트 위임 및 백업 이미지로드에 실패 할 경우에도 윈도우의 오류에 포착 이벤트와 더 우아한 방법이 생각합니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바