CSS / HTML 만 사용하여 깨진 아이콘을 숨기는 방법은 무엇입니까?

깨진 이미지 아이콘을 숨기려면 어떻게해야합니까? 예 :

src 오류가있는 이미지가 있습니다.

<img src="Error.src"/>

솔루션은 모든 브라우저에서 작동해야합니다.

CSS / HTML이 이미지의 링크가 끊어 졌는지 알 수있는 방법이 없으므로, 무엇이든 JavaScript를 사용해야합니다

그러나 이미지를 숨기거나 소스를 백업으로 바꾸는 최소한의 방법이 있습니다.

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

또는

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

최신 정보

다음과 같은 방법으로이 논리를 여러 이미지에 한 번에 적용 할 수 있습니다.

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

업데이트 2

A에 대한 CSS 옵션 참조 michalzuber의 대답은 아래를. 전체 이미지를 숨길 수는 없지만 깨진 아이콘의 모양은 변경됩니다.

사람들이 여기에 말한 내용에도 불구하고 JavaScript가 전혀 필요하지 않으며 CSS가 필요하지 않습니다!

실제로 HTML로만 수행 할 수 있고 단순합니다. 이미지가로드되지 않으면 기본 이미지를 표시 할 수도 있습니다 . 방법은 다음과 같습니다.

이것은 IE8까지도 모든 브라우저에서 작동합니다 (2015 년 9 월에 호스팅 한 사이트를 방문한 250,000 명 이상의 방문자 중 ZERO 사람들은 IE8보다 나쁜 것을 사용했습니다.이 솔루션은 문자 그대로 모든 것에 적용됩니다 ).

1 단계 : 이미지를 img 대신 객체 로 참조하십시오 . 객체가 실패하면 깨진 아이콘이 표시되지 않습니다. 그들은 아무것도하지 않습니다. IE8부터는 Object와 Img 태그를 서로 바꿔 사용할 수 있습니다. 당신은 당신이 정기적으로 이미지로 할 수있는 모든 영광스러운 것들의 크기를 조정하고 할 수 있습니다. 객체 태그를 두려워하지 마십시오. 그것은 단지 태그 일뿐 아니라 크고 부피가 큰 것은로드되지 않으며 아무것도 느려지지 않습니다. 다른 이름으로 img 태그를 사용하면됩니다. 속도 테스트는 동일하게 사용되었음을 보여줍니다.

2 단계 : (선택적이지만 굉장합니다) 해당 객체 안에 기본 이미지를 붙여 넣습니다. 원하는 이미지가 실제로 객체에 로드 되면 기본 이미지가 표시되지 않습니다. 예를 들어 사용자 아바타 목록을 표시 할 수 있으며, 누군가 서버에 이미지가없는 경우 자리 표시 자 이미지를 표시 할 수 있습니다. 자바 스크립트 나 CSS가 전혀 필요하지 않지만 대부분의 사람들이 JavaScript를 사용합니다.

코드는 다음과 같습니다.

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... 예, 그렇게 간단합니다.

CSS로 기본 이미지를 구현하려면 다음과 같이 HTML에서 훨씬 간단하게 만들 수 있습니다.

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... 그리고이 답변에서 CSS를 추가하십시오-> https://stackoverflow.com/a/32928240/3196360

https://bitsofco.de/styling-broken-images/ 에서 훌륭한 솔루션을 찾았습니다.

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

alt = "abc" 텍스트로 alt를 추가 하면 쇼가 손상된 썸네일이 표시되고 alt 메시지 abc가 표시됩니다

<img src="pic_trulli.jpg" alt="abc"/>

alt를 추가하지 않으면 쇼 손상된 썸네일이 표시됩니다

<img src="pic_trulli.jpg"/>

깨진 것을 숨기려면 alt = ""를 추가하십시오. 손상된 썸네일과 alt 메시지가 표시되지 않습니다 (js를 사용하지 않고)

<img src="pic_trulli.jpg" alt=""/>

깨진 것을 숨기려면 alt = ""& onerror = "this.style.display = 'none'"을 추가 하십시오. 손상된 썸네일과 alt 메시지가 표시되지 않습니다 (js 포함)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

네 번째는 약간 위험합니다 (정확하지는 않습니다). onerror 이벤트에 이미지를 추가하려는 경우 이미지가 style.display로 존재하더라도 추가하는 것처럼 표시되지 않습니다. 따라서 대체 이미지가 필요하지 않을 때 사용하십시오.

display: 'none'; // in css

CSS로 제공하면 이미지, iframe, div와 같은 항목이 표시되지 않습니다.

이미지를 표시하고 오류가 발생하면 완전히 빈 공간을 표시하려면 사용할 수 있지만 공간이 필요하지 않도록주의하십시오. 따라서 div에 보관해야 할 수도 있습니다.

링크 https://jsfiddle.net/02d9yshw/

가장 쉬운 방법은 텍스트 들여 쓰기 속성으로 깨진 이미지 아이콘을 숨기는 것입니다.

img {
    text-indent: -10000px
}

"alt"속성을 보려면 분명히 작동하지 않습니다.

자리 표시 자로 이미지를 유지 / 필요한 경우 onerror 및 일부 CSS를 사용하여 불투명도를 0으로 변경하여 이미지 크기를 설정할 수 있습니다. 이렇게하면 끊어진 링크는 보이지 않지만 페이지는 정상적으로로드됩니다.

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

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

Nick 의 답변 이 마음 에 들었고이 솔루션으로 놀고있었습니다. 더 깨끗한 방법을 찾았습니다. :: before / :: after pseudos는 img 및 object와 같은 교체 된 요소에서 작동하지 않으므로 객체 데이터 (src)가로드되지 않은 경우에만 작동합니다. HTML을 더 깨끗하게 유지하고 객체가로드되지 않으면 의사를 추가합니다.

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

나중에 채워 져서 이미지 컨테이너를 계속 볼 수 있어야하고 표시하거나 숨기고 싶지 않은 경우 src 내부에 1x1 투명 이미지를 붙일 수 있습니다.

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

나는 이것을 정확한 목적으로 사용했습니다. Ajax를 통해 이미지를로드 할 이미지 컨테이너가있었습니다. 이미지가 크고로드하는 데 약간의 시간이 걸리기 때문에 Gif 로딩 바의 CSS에서 배경 이미지를 설정해야했습니다.

그러나의 src가 비어 있기 때문에 깨진 이미지 아이콘은 여전히이를 사용하는 브라우저에 나타납니다.

투명한 1x1 Gif를 설정하면 CSS 또는 JavaScript를 통한 코드 추가없이 간단하고 효과적으로이 문제를 해결할 수 있습니다.

CSS 만 사용하는 것은 어렵지만 background-image대신 CSS를 사용할 수 있습니다<img> 태그 ...

이 같은:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

작동하는 바이올린 은 다음과 같습니다. 있습니다.

참고 : 이미지의 위치를 ​​보여주기 위해 바이올린의 CSS에 테두리를 추가했습니다.

객체 태그를 사용하십시오. 다음과 같이 태그 사이에 대체 텍스트를 추가하십시오.

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

2005 년 부터 Firefox와 같은 Mozilla 브라우저는 :-moz-broken이 요청을 정확하게 수행 할 수있는 비표준 CSS 의사 클래스를 지원했습니다 .

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::beforeFirefox 64에서도 작동합니다 img[alt]::after. Chrome 71에서 작동하지 않을 수 있습니다.

CSS 솔루션 으로이 경로를 따를 수 있습니다

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

누락 된 이미지는 아무 것도 표시하지 않거나 [? ] 소스를 찾을 수없는 경우 스타일 상자. 대신 "결측 이미지 누락"그래픽으로 대체하여 무언가 잘못되었다는 시각적 피드백이 더 좋을 수 있습니다. 또는 완전히 숨길 수도 있습니다. 브라우저가 찾을 수없는 이미지가 우리가 볼 수있는 "오류"JavaScript 이벤트를 발생시키기 때문에 가능합니다.

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

또한 이런 상황이 발생하면 사이트 관리자에게 이메일을 보내기 위해 일종의 Ajax 작업을 트리거 할 수 있습니다.

트릭 img::after은 좋은 것이지만 적어도 2 가지 단점이 있습니다.

1. 모든 브라우저에서 지원되지는 않습니다 (예 : Edge에서 작동하지 않음 https://codepen.io/dsheiko/pen/VgYErm )
2. 단순히 이미지를 숨기거나 덮을 수는 없습니다. 따라서 기본 이미지를 표시 할 때 도움이되지 않습니다.

JavaScript가없는 보편적 인 솔루션을 모르지만 Firefox의 경우 좋은 해결책이 있습니다.

img:-moz-broken{
  opacity: 0;
}

다른 사람들이 설명한 것과 동일한 아이디어가 React에서 다음과 같이 작동합니다.

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>

코드 없이이 작업을 수행하는 기본적이고 매우 간단한 방법은 빈 alt 문을 제공하는 것입니다. 그런 다음 브라우저는 이미지를 공백으로 반환합니다. 이미지가없는 것처럼 보입니다.

예:

<img class="img_gal" alt="" src="awesome.jpg">

그것을보고보십시오! ;)

향후 Google 직원을 위해 2016 년에는 속성 선택기를 사용하여 빈 이미지를 숨기는 브라우저 안전 순수 CSS 방법이 있습니다.

img[src="Error.src"] {
    display: none;
}

편집 : 나는 돌아 왔습니다 .2019 년 에는 Shadow Dom에서 실제 대체 텍스트 및 대체 텍스트 이미지의 스타일을 지정하는 방법이 있지만 개발자 도구에서만 작동합니다. 그래서 당신은 그것을 사용할 수 없습니다. 죄송합니다. 너무 좋을 것입니다.

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}