html <img>의 src 속성이 유효하지 않은 경우 기본 이미지를 입력 하시겠습니까?

268

속성이 유효하지 않은 경우 (HTML 만 사용) HTML <img>태그 에서 기본 이미지를 렌더링하는 방법이 src있습니까? 그렇지 않은 경우 간단한 해결 방법은 무엇입니까?

html  image 
— 갈릴 유
소스
3
HTML은 깨진 이미지에 대한 대체 기능이 없습니다. 깨진 이미지를 찾아 src 속성을 변경하려면 JavaScript를 사용해야합니다.
— Blixt 2016 년
2
@Blixt - 클라이언트가 MS Outlook 또는 someother 이메일 리더이며 자바 스크립트를 가지고 있지 않으며, 객체 옵션이 ... 그럴 일 가정 않는 어떤 경우 유일한 해결책은 고도 / 텍스트입니다
— Xofo

답변:

319

HTML 전용 솔루션을 요청했습니다 ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>
스 니펫 확장

첫 번째 이미지가 없으므로 폴백 (이 웹 사이트에서 사용 된 스프라이트 *)이 표시됩니다. 당신이 사용하는 경우 그리고 정말 지원하지 않는 오래된 브라우저를 object, 그 태그를 무시하고 사용하는 img태그를. 호환성에 대해서는 caniuse 웹 사이트를 참조하십시오 . 이 요소는 IE6 +의 모든 브라우저에서 널리 지원됩니다.

* 이미지의 URL이 (다시) 변경되지 않는 한 대체 텍스트가 표시 될 것입니다.

— 패트릭 맥엘 하네이
소스
3
HTML 4.01 용 DTD를 넣은 후에 IE8에서 효과가있었습니다.
— Patrick McElhaney
존재하지 않는 이미지가 더 허용적인 설정으로 X-Frame-Options설정되어 있으면 작동하지 않습니다 SAMEORIGIN.
— Attila O.
작동하지만 object.data의 링크를 신뢰할 수없는 경우 모든 종류의 항목을로드 할 수 있습니다.
— Michael_Scharf
1
'img'요소는 'object'요소 안에 중첩 될 수 없습니다.
— Matheus Miranda
2
@Matheus 물론 가능합니다. HTML4 객체에는 흐름 내용 (img를 포함한 거의 모든 것)이 포함될 수 있으며 HTML5에서는 투명하므로 유효한 HTML5를 포함 할 수 있습니다.
— 패트릭 맥엘하니
318

이것은 나를 위해 잘 작동합니다. JQuery를 사용하여 이벤트를 연결하고 싶을 수도 있습니다.

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

자카드 오류 가드로 업데이트

업데이트 : 최근에 본 CSS 전용 솔루션 Vitaly Friedman 데모에서 알지 못하는 훌륭한 CSS 솔루션을 . 아이디어는 content깨진 이미지에 속성 을 적용하는 것입니다 . 일반적으로 :after또는 :before이미지에는 적용되지 않지만 이미지가 깨지면 적용됩니다.

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

데모 : https://jsfiddle.net/uz2gmh2k/2/

바이올린에서 알 수 있듯이 깨진 이미지 자체는 제거되지 않지만 JS 또는 CSS의 gobs가없는 대부분의 경우 문제를 해결할 것입니다. 다른 위치에 다른 이미지를 적용해야하는 경우 간단히 클래스로 구분하십시오..my-special-case img:before { ...

— 스 벤드
소스
3
내 의견으로는. 이것이 더 나은 대답입니다. 여기 quirksmodes가 onerror를 취합니다 ..... 나에게 꽤 안전한 것으로 보입니다. quirksmode.org/dom/events/error.html#t01
— n0nag0n
12
BTW, error.jpg가 존재하지 않으면 이미지를 찾으려고 계속 시도하여 무한 루프가 발생하고 onError가 다시 호출되고 찾을 수 없으며 전체가 다시 시작됩니다.
— borq
30
무한 루프 위험을 피하려면 <img src = "foo.jpg"onerror = "if (this.src! = 'error.jog') this.src = 'error.jpg';">
— jacquarg
21
또는 다음과 같이 작성할 수 있습니다.onerror="this.src='error.jpg';this.onerror='';"
— Denilson Sá Maia
6
jQuery는 어디에 있습니까?
— Praveen Kumar Purushothaman
64

Spring in Action 3rd Ed에서이 솔루션을 찾았습니다.

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

업데이트 : 이것은 HTML 전용 솔루션이 아닙니다 ... onerrorJavascript입니다

— 배틀을 막다
소스
3
이것은 잘 작동합니다. 다음은 imgur에 대한 대체 이미지로 업데이트 된 내용입니다. <img src = "a-missing-image.jpg"alt = ""onerror = "this.src = 'http : ///i.imgur.com/hfM1J8s.png' ">
— arpo
15 

<img style="background-image: url(image1), url(image2);"></img>
스 니펫 확장

여러 이미지를 추가 할 수있는 배경 이미지를 사용하십시오. 내 경우 : image1은 기본 이미지이며, 이것은 어떤 곳에서 가져옵니다 (브라우저가 요청을 수행함) image2는 image1 이로 드되는 동안 표시되는 기본 로컬 이미지입니다. image1이 어떤 종류의 오류를 반환하면 사용자에게 변경 사항이 표시되지 않으며 사용자 경험을 위해 깨끗합니다.

— 에밀리아 노 바르 보자
소스
— Emiliano Barboza
이것은 image1이 완전히 불투명 한 경우에만 작동합니다. 대부분의 아이콘 이미지처럼 투명도가 있으면 image2가 표시됩니다.
— jdunning
14 
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

이미지의 크기를 입력하고 이미지를 타일로 표시할지 여부를 입력하십시오.

— 램팩
소스
28
이미지를 찾을 수 없을 때 대부분의 브라우저에 '깨진 링크'이미지가 표시되지는 않습니다 ...이 경우 배경을 설정해도 문제가 해결되지 않습니다.
— Justin D.
13

HTML 만 사용하는 것이 가능하다고 생각하지 않습니다. 그러나 자바 스크립트를 사용하면 가능합니다. 기본적으로 우리는 각 이미지를 반복하고 이미지가 완전한지 테스트하고 naturalWidth가 0인지 여부를 테스트합니다. 코드는 다음과 같습니다.

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

다음과 같이 사용하십시오.

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

Chrome 및 Firefox에서 테스트

— 핌 예거
소스
2
Pim을 사용하고 있으며 완전히 재사용 가능하지만이 경우 경량 옵션을 선호합니다. 고마워 :) +1
— Galilyou
당신은 내 모든 생명을 구했습니다.
— Beardminator
12

Angular / jQuery를 사용하는 경우 도움이 될 수 있습니다 ...

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

설명

null 일 수 item있는 속성 url이 있다고 가정하면 이미지가 깨진 것으로 표시됩니다. onerror위에서 설명한 것처럼 특성 표현식의 실행을 트리거합니다 . 당신은 재정의해야합니다src위에서 설명한대로 속성 하지만 altSrc에 액세스하려면 jQuery가 필요합니다. 바닐라 JavaScript로 작동하지 못했습니다.

약간 해키처럼 보이지만 내 프로젝트에서 하루를 절약했습니다.

— 오비
소스
11

간단한 img 요소는 매우 유연하지 않으므로 그림 요소와 결합했습니다. 이런 식으로 CSS가 필요하지 않습니다. 오류가 발생하면 모든 srcset이 대체 버전으로 설정됩니다. 깨진 링크 이미지가 표시되지 않습니다. 불필요한 이미지 버전을로드하지 않습니다. 그림 요소는 반응 형 디자인 및 브라우저에서 지원하지 않는 유형에 대한 여러 대체를 지원합니다.

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
— 바포
소스
이거 대단해! 누락 된 브라우저 지원 caniuse.com/#feat=picture에주의하십시오 . IE11과 같은 오래된 브라우저를 지원해야하는 경우 폴리 필 또는 다른 솔루션을 사용해보십시오.
— Hinrich
7

각도 2 : 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
— 사용자 3601578
소스
1
이것이 효과가있을 수 있지만 새로운 정보를 추가한다고 생각하지 않습니다. onerror 부분은 바닐라 JavaScript이며 src 바인딩은 Angular 사용자에게 이미 알려져 있어야합니다.
— Chic
7

좋은 답변과 의견이 포함 된 간단하고 깔끔한 솔루션입니다.

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

무한 루프 위험도 해결합니다.

나를 위해 일했다.

— 매니쉬 쿠마르
소스
IMO, 이것은 분명히 우아하게 보이지 않습니다.
— Script47
1
@ Script47 깔끔하고 반복적입니다
— manish kumar
1
아니, 나는 그것이 깔끔하지 않다고 말하지 않을 것입니다. 이것은 아마도 다른 솔루션의 리해시 일 것입니다.
— Script47
매력처럼 작동합니다! 감사합니다!
— Goehybrid
1
생명의 은인. 나는 우아하고 싶지 않았고 단순하고 일하기를 원했습니다. 감사!
— 키트
7

삽입 할 이미지의 크기 를 아는 것이 유일한 요구 사항 인 HTML 전용 솔루션 입니다. background-image필러로 사용 되는 투명 이미지에는 작동하지 않습니다 .

background-image주어진 이미지가없는 경우 나타나는 이미지를 성공적 으로 연결하는 데 사용할 수 있습니다 . 그런 다음 유일한 문제는 깨진 아이콘 이미지입니다. 매우 큰 빈 문자를 삽입하여 콘텐츠를 표시 밖으로 밀어서 제거 할 수 있습니다 img.

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}
This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder
스 니펫 확장

CSS 전용 솔루션 (웹킷 만 해당)

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
}
This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder
스 니펫 확장

— eithed
소스
4

페이지를 보려고하는 수많은 클라이언트 (브라우저)를 확신 할 수있는 방법이 없습니다. 고려해야 할 한 가지 측면은 이메일 클라이언트가 사실상 웹 브라우저이며 그러한 까다로운 문제를 처리하지 못할 수 있다는 것입니다 ...

따라서 이와 같이 DEFAULT WIDTH와 HEIGHT를 가진 alt / text도 포함해야합니다. 이것은 순수한 HTML 솔루션입니다.

alt="NO IMAGE" width="800" height="350"

따라서 다른 좋은 대답은 다음과 같이 약간 수정됩니다.

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

Chrome에서 객체 태그에 문제가 있었지만 이것이 적용 될 것이라고 생각합니다.

ALT / 텍스트를 더 크게 스타일링 할 수 있습니다.

그래서 내 대답은 멋진 alt / text fallback과 함께 Javascript를 사용하는 것입니다.

나는 또한이 흥미로운 것을 발견했다 : 이미지의 alt 속성을 스타일링하는 방법

— 소포
소스
3

JQuery 와 함께 수정 가능한 버전은 파일 끝에 다음을 추가하십시오.

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

그리고 당신의 img태그에 :

<img src="..." data-src-error="..." />
— 케빈 로바 텔
소스
3

위의 해결 방법이 불완전 하여 속성이 누락되었습니다 src.

this.src과 this.attribute('src')동일하지 않은, 첫 번째 이미지의 전체 참조를 포함한다 예를 들어 http://my.host/error.jpg,하지만 특성은 원래의 값을 유지error.jpg

올바른 해결책

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
— 세브
소스
3
이 코드를 사용하면 Uncaught TypeError: this.attribute is not a functionChrome 43에서 볼 수 있습니다 .
— John Washam
jQuery를 사용하고 있습니까?
— mix3d
onError는 developer.mozilla.org/en-US/docs/Web/HTML/Element/img에 따라 더 이상 사용되지 않습니다.
— comiventor
2

Angular 1.x를 사용하는 경우 원하는 수의 이미지로 대체 할 수있는 지시문을 포함 할 수 있습니다. 대체 속성은 단일 URL, 배열 내의 여러 URL 또는 범위 데이터를 사용하는 각도 표현식을 지원합니다.

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

각도 앱 모듈에 새로운 대체 지시문을 추가하십시오.

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])
— 롭 에반스
소스
멋진 아이디어! 폴백 이미지의 배열은 좋은 구현입니다.
— Z. Khullah
1

최근에 여러 개의 대체 이미지가 포함 된 대체 시스템을 구축해야했습니다. 간단한 JavaScript 함수를 사용하여 수행 한 방법은 다음과 같습니다.

HTML

<img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-fallIndex="1"
    data-fallback1="some_image.png"
    data-fallback2="some_image.jpg">

자바 스크립트

function fallBackImg(elem){
    elem.onerror = null;
    let index = +elem.dataset.fallIndex;
    elem.src = elem.dataset[`fallback${index}`];
    index++;
    elem.dataset.fallbackindex = index;
}

많은 대체 이미지를 처리하는 매우 가벼운 방법 인 것 같습니다.

— 레이 거
소스
— comiventor
0

Jquery를 사용하면 다음과 같이 할 수 있습니다.

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});
— 존
소스
0

모든 이미지의 경우 다음 자바 스크립트 코드를 사용하십시오.

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

여기서 ptImageA는 <img>태그 어드레스에 의해 얻어진 document.getElementById().

— 호세 에스 테베스 페레이라
소스
0

Google은이 페이지를 "image fallback html"키워드로 처리했지만 위의 내용 중 어느 것도 도움이되지 않았기 때문에 "IE에 대한 SVG 대체 지원 9 미만"을 찾고 있었기 때문에 검색을 계속했습니다. 

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

주제가 아닌 것일 수도 있지만 내 문제를 해결했으며 다른 사람에게도 도움이 될 수 있습니다.

— 산도르 주 볼리
소스
0

크로스 플랫폼 앵귤러 js 솔루션을 찾고있는 사람들을 위해 Patrick의 훌륭한 답변 외에도 여기로 이동하십시오.

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

여기에 올바른 솔루션을 찾으려고 놀고있는 plunk가 있습니다. http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

— 선세이
소스
0

동적 웹 프로젝트를 작성하고 WebContent에 필요한 이미지를 배치 한 경우 Spring MVC에서 아래 언급 된 코드를 사용하여 이미지에 액세스 할 수 있습니다.

<img src="Refresh.png" alt="Refresh" height="50" width="50">

img라는 폴더를 만들고 img 폴더 안에 이미지를 배치하고 해당 img 폴더를 WebContent 안에 배치하면 아래에 언급 된 코드를 사용하여 이미지에 액세스 할 수 있습니다.

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">
— 요 시타 마 하얀
소스
-2

잘!! 이 방법이 편리하다는 것을 알았습니다. 이미지의 높이 속성이 0인지 확인한 다음 기본 이미지로 src 속성을 덮어 쓸 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/ 영상

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }
— 수 하일
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.