Làm cách nào để ẩn Biểu tượng bị hỏng Biểu tượng chỉ sử dụng CSS / HTML?

Làm thế nào tôi có thể ẩn biểu tượng hình ảnh bị hỏng? Ví dụ :

Tôi có một hình ảnh với lỗi src:

<img src="Error.src"/>

Giải pháp phải hoạt động trong tất cả các trình duyệt.

CSS / HTML không có cách nào để biết hình ảnh có bị hỏng liên kết hay không, vì vậy bạn sẽ phải sử dụng JavaScript cho dù thế nào đi nữa

Nhưng đây là một phương pháp tối thiểu để ẩn hình ảnh hoặc thay thế nguồn bằng bản sao lưu.

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

hoặc là

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

Cập nhật

Bạn có thể áp dụng logic này cho nhiều hình ảnh cùng một lúc bằng cách làm như thế này:

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

Cập nhật 2

Để biết tùy chọn CSS, hãy xem câu trả lời của michalzub bên dưới. Bạn không thể ẩn toàn bộ hình ảnh, nhưng bạn thay đổi giao diện của biểu tượng bị hỏng.

Bất chấp những gì mọi người đang nói ở đây, bạn hoàn toàn không cần JavaScript, thậm chí bạn không cần CSS !!

Nó thực sự rất khả thi và đơn giản chỉ với HTML. Bạn thậm chí có thể hiển thị một hình ảnh mặc định nếu một hình ảnh không tải . Đây là cách ...

Điều này cũng hoạt động trên tất cả các trình duyệt, thậm chí từ IE8 (trong số hơn 250.000 khách truy cập vào các trang web tôi lưu trữ vào tháng 9 năm 2015, người ZERO đã sử dụng một cái gì đó tồi tệ hơn IE8, có nghĩa là giải pháp này hoạt động cho mọi thứ theo nghĩa đen ).

Bước 1: Tham chiếu hình ảnh dưới dạng đối tượng thay vì img . Khi các đối tượng thất bại, chúng không hiển thị các biểu tượng bị hỏng; họ không làm gì cả Bắt đầu với IE8, bạn có thể sử dụng các thẻ Object và Img thay thế cho nhau. Bạn có thể thay đổi kích thước và làm tất cả những thứ tuyệt vời bạn có thể với hình ảnh thông thường. Đừng sợ thẻ đối tượng; nó chỉ là một thẻ, không có gì to lớn và cồng kềnh được tải và nó không làm chậm bất cứ điều gì. Bạn sẽ chỉ sử dụng thẻ img theo tên khác. Một bài kiểm tra tốc độ cho thấy chúng được sử dụng giống hệt nhau.

Bước 2: (Tùy chọn, nhưng tuyệt vời) Dán hình ảnh mặc định bên trong đối tượng đó. Nếu hình ảnh bạn muốn thực sự tải trong đối tượng , hình ảnh mặc định sẽ không hiển thị. Vì vậy, ví dụ bạn có thể hiển thị danh sách hình đại diện người dùng và nếu ai đó chưa có hình ảnh trên máy chủ, nó có thể hiển thị hình ảnh giữ chỗ ... không yêu cầu javascript hoặc CSS, nhưng bạn có được các tính năng của những gì mất hầu hết mọi người JavaScript.

Đây là mã ...

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

... Vâng, nó đơn giản.

Nếu bạn muốn triển khai hình ảnh mặc định bằng CSS, bạn có thể làm cho nó đơn giản hơn trong HTML của mình như thế này ...

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

... và chỉ cần thêm CSS từ câu trả lời này -> https://stackoverflow.com/a/32928240/3196360

Tìm thấy một giải pháp tuyệt vời tại https://bitsofco.de/stomme-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">

Nếu bạn sẽ thêm alt với văn bản alt = "abc", nó sẽ hiển thị hình thu nhỏ bị hỏng và thông báo alt abc

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

Nếu bạn không thêm alt, nó sẽ hiển thị hình thu nhỏ bị hỏng

<img src="pic_trulli.jpg"/>

Nếu bạn muốn ẩn cái bị hỏng, chỉ cần thêm alt = "" nó sẽ không hiển thị hình thu nhỏ bị hỏng và bất kỳ thông báo alt nào (không sử dụng js)

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

Nếu bạn muốn ẩn cái bị hỏng, chỉ cần thêm alt = "" & onerror = "this.style.display = 'none'", nó sẽ không hiển thị hình thu nhỏ bị hỏng và bất kỳ thông báo alt nào (với js)

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

Cái thứ 4 hơi nguy hiểm (không chính xác), nếu bạn muốn thêm bất kỳ hình ảnh nào trong sự kiện onerror, nó sẽ không hiển thị ngay cả khi Image tồn tại dưới dạng style.display giống như thêm. Vì vậy, sử dụng nó khi bạn không yêu cầu bất kỳ hình ảnh thay thế nào để hiển thị.

display: 'none'; // in css

Nếu chúng tôi cung cấp nó trong CSS, thì mục đó sẽ không hiển thị (như hình ảnh, iframe, div như thế).

Nếu bạn muốn hiển thị hình ảnh & bạn muốn hiển thị không gian trống hoàn toàn nếu có lỗi, thì bạn có thể sử dụng, nhưng hãy cẩn thận, điều này sẽ không chiếm bất kỳ khoảng trống nào. Vì vậy, bạn cần giữ nó trong một div có thể

Liên kết https://jsfiddle.net/02d9yshw/

Tôi nghĩ cách dễ nhất là ẩn biểu tượng hình ảnh bị hỏng bởi thuộc tính văn bản thụt lề.

img {
    text-indent: -10000px
}

Rõ ràng là nó không hoạt động nếu bạn muốn xem thuộc tính "alt".

Tôi thích câu trả lời của Nick và đã chơi xung quanh với giải pháp này. Tìm thấy một phương pháp sạch hơn. Vì :: trước / :: sau khi giả không hoạt động trên các phần tử được thay thế như img và đối tượng, chúng sẽ chỉ hoạt động nếu dữ liệu đối tượng (src) không được tải. Nó giữ cho HTML sạch hơn và sẽ chỉ thêm giả nếu đối tượng không tải.

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>

trong trường hợp bạn muốn giữ / cần hình ảnh như một trình giữ chỗ, bạn có thể thay đổi độ mờ thành 0 bằng một trình khởi chạy và một số CSS để đặt kích thước hình ảnh. Bằng cách này, bạn sẽ không thấy liên kết bị hỏng, nhưng trang tải như bình thường.

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

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

Nếu bạn vẫn cần để hộp chứa hình ảnh hiển thị do nó được điền vào sau này và không muốn làm phiền với việc hiển thị và ẩn nó, bạn có thể dán hình ảnh trong suốt 1x1 bên trong src:

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

Tôi đã sử dụng điều này cho mục đích chính xác này. Tôi đã có một thùng chứa hình ảnh sẽ có một hình ảnh được tải vào nó thông qua Ajax. Vì hình ảnh lớn và mất một chút để tải, nên nó yêu cầu thiết lập hình nền trong CSS của thanh tải Gif.

Tuy nhiên, vì src của trống, biểu tượng hình ảnh bị hỏng vẫn xuất hiện trong các trình duyệt sử dụng nó.

Đặt Gif 1x1 trong suốt khắc phục sự cố này một cách đơn giản và hiệu quả mà không cần thêm mã thông qua CSS hoặc JavaScript.

Chỉ sử dụng CSS là khó, nhưng bạn có thể sử dụng CSS background-imagethay vì<img> thẻ ...

Một cái gì đó như thế này:

HTML

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

CSS

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

}

Đây là một fiddle làm việc .

Lưu ý: Tôi đã thêm đường viền trong CSS trên fiddle chỉ để chứng minh hình ảnh sẽ ở đâu.

Sử dụng thẻ đối tượng. Thêm văn bản thay thế giữa các thẻ như thế này:

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

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

Từ năm 2005 , các trình duyệt Mozilla như Firefox đã hỗ trợ :-moz-brokenlớp giả CSS không chuẩn có thể thực hiện chính xác yêu cầu này:

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]::beforecũng hoạt động trong Firefox 64 (mặc dù đã có một thời gian img[alt]::afternên điều này không đáng tin cậy). Tôi không thể khiến một trong hai người đó hoạt động trong Chrome 71.

Bạn có thể đi theo con đường này như một giải pháp 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">

Thiếu hình ảnh sẽ không hiển thị gì hoặc hiển thị [? ] hộp kiểu khi nguồn của họ không thể được tìm thấy. Thay vào đó, bạn có thể muốn thay thế nó bằng một hình ảnh "thiếu hình ảnh" mà bạn chắc chắn tồn tại để có phản hồi trực quan tốt hơn rằng có gì đó không đúng. Hoặc, bạn có thể muốn ẩn nó hoàn toàn. Điều này là có thể, bởi vì những hình ảnh mà trình duyệt không thể phát hiện ra sự kiện JavaScript "lỗi" mà chúng ta có thể xem.

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

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

Ngoài ra, bạn có thể muốn kích hoạt một số loại hành động Ajax để gửi email đến quản trị viên trang khi điều này xảy ra.

Thủ thuật với img::afterlà một công cụ tốt, nhưng có ít nhất 2 nhược điểm:

1. không được hỗ trợ bởi tất cả các trình duyệt (ví dụ: không hoạt động trên Edge https://codepen.io/dsheiko/pen/VgYErm )
2. bạn không thể ẩn hình ảnh một cách đơn giản, bạn che nó đi - vì vậy sẽ không hữu ích khi bạn hiển thị hình ảnh mặc định trong trường hợp nào

Tôi không biết một giải pháp phổ quát mà không có JavaScript, nhưng đối với Firefox chỉ có một giải pháp hay:

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

Một cách cơ bản và rất đơn giản để làm điều này mà không cần bất kỳ mã nào được yêu cầu là chỉ cung cấp một câu lệnh alt trống. Trình duyệt sau đó sẽ trả lại hình ảnh là trống. Nó sẽ trông giống như nếu hình ảnh không có ở đó.

Thí dụ:

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

Hãy thử nó để xem! ;)

Đối với các nhân viên Google trong tương lai, năm 2016 có một trình duyệt CSS an toàn để ẩn hình ảnh trống bằng cách sử dụng bộ chọn thuộc tính:

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

Chỉnh sửa: Tôi đã trở lại - đối với những người làm việc trong tương lai, vào năm 2019, có một cách để định kiểu văn bản thay thế thực tế và hình ảnh văn bản thay thế trong Shadow Dom, nhưng nó chỉ hoạt động trong các công cụ dành cho nhà phát triển. Vì vậy, bạn không thể sử dụng nó. Lấy làm tiếc. Nó sẽ rất đẹp.

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