วิธีการซ่อนไอคอนภาพที่เสียหายโดยใช้ 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

สำหรับตัวเลือก CSSดูคำตอบของ michalzuberด้านล่าง คุณไม่สามารถซ่อนภาพทั้งหมด แต่คุณเปลี่ยนลักษณะของไอคอนที่เสียหาย

แม้จะมีคนพูดถึงที่นี่คุณไม่ต้องการ JavaScript เลย แต่คุณไม่จำเป็นต้องใช้ CSS !!

จริงๆแล้วทำได้ง่ายและใช้ HTML อย่างง่ายเท่านั้น คุณยังสามารถแสดงภาพเริ่มต้นถ้าภาพไม่โหลด นี่คือวิธี ...

สิ่งนี้ใช้ได้กับเบราว์เซอร์ทุกตัวแม้กระทั่งเท่าที่ IE8 (จากผู้เยี่ยมชมไซต์ที่ฉันโฮสต์ในเดือนกันยายน 2558 กว่า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 ด้วย text alt = "abc"จะแสดงการแสดงภาพย่อที่เสียหายและ alt text abc

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

หากคุณจะไม่เพิ่ม alt มันจะแสดงภาพย่อที่เสียหาย

<img src="pic_trulli.jpg"/>

หากคุณต้องการซ่อนภาพที่เสียหายเพียงแค่เพิ่ม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"

ในกรณีที่คุณต้องการเก็บ / ต้องการภาพเป็นตัวยึดตำแหน่งคุณสามารถเปลี่ยนความทึบเป็น 0 ด้วย onerror และ CSS บางอย่างเพื่อตั้งขนาดภาพ ด้วยวิธีนี้คุณจะไม่เห็นลิงค์เสีย แต่หน้าโหลดตามปกติ

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

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

ฉันชอบคำตอบของNickและเล่นกับโซลูชันนี้ พบวิธีที่สะอาดกว่า เนื่องจาก :: before / :: หลังจาก pseudos ไม่สามารถใช้งานองค์ประกอบที่ถูกแทนที่เช่น img และวัตถุพวกมันจะทำงานได้ก็ต่อเมื่อไม่ได้โหลดข้อมูลวัตถุ (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>

หากคุณยังต้องการให้มีคอนเทนเนอร์รูปภาพที่มองเห็นเนื่องจากมันถูกบรรจุในภายหลังและไม่ต้องการรบกวนการแสดงและซ่อนมันคุณสามารถติดภาพโปร่งใสขนาด 1x1 ภายใน src:

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

ฉันใช้สิ่งนี้เพื่อจุดประสงค์ที่แน่นอนนี้ ฉันมีคอนเทนเนอร์รูปภาพที่จะโหลดรูปภาพลงในอาแจ็กซ์ เนื่องจากภาพมีขนาดใหญ่และใช้เวลาในการโหลดเล็กน้อยจึงจำเป็นต้องตั้งค่าภาพพื้นหลังใน CSS ของแถบโหลด Gif

อย่างไรก็ตามเนื่องจาก src ของว่างเปล่าไอคอนรูปภาพที่เสียหายยังคงปรากฏในเบราว์เซอร์ที่ใช้งาน

การตั้งค่า 1x1 Gif โปร่งใสแก้ไขปัญหานี้ได้อย่างง่ายดายและมีประสิทธิภาพโดยไม่มีการเพิ่มโค้ดผ่าน CSS หรือ JavaScript

การใช้ CSS นั้นยาก แต่คุณสามารถใช้ CSS background-imageแทน<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เบราว์เซอร์ Mozilla เช่น Firefox ได้สนับสนุน:-moz-brokenCSS pseudo-class ที่ไม่ได้มาตรฐานซึ่งสามารถทำตามคำขอนี้ได้อย่างสมบูรณ์:

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]::beforeยังใช้งานได้ใน Firefox 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 ในอนาคตในปี 2559 มีวิธี CSS บริสุทธิ์ที่ปลอดภัยสำหรับเบราว์เซอร์ในการซ่อนรูปภาพเปล่าโดยใช้ตัวเลือกแอททริบิวต์:

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

แก้ไข:ฉันกลับมา - สำหรับชาว Google ในอนาคตในปี 2019มีวิธีการจัดรูปแบบข้อความ alt จริงและรูปภาพข้อความ alt ใน Shadow Dom แต่ทำงานได้ในเครื่องมือของนักพัฒนาเท่านั้น ดังนั้นคุณไม่สามารถใช้งานได้ ขอโทษ มันจะดีมาก

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