HTML nếu không tìm thấy hình ảnh

Tôi có một hình ảnh trong trang HTML:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

Nếu hình ảnh không được tìm thấy trên máy chủ, nó sẽ hiển thị một hình vuông trống xấu xí.

Tôi muốn tạo nó để nếu không tìm thấy hình ảnh, nó sẽ không hiển thị gì hoặc một số hình ảnh mặc định khác mà tôi biết chắc chắn là trên máy chủ.

Điều này có thể giải quyết như thế nào?

Cách tốt nhất để giải quyết vấn đề của bạn:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror là một điều tốt cho bạn :)

Chỉ cần thay đổi tên tệp hình ảnh và tự mình thử.

Vâng, bạn có thể thử điều này.

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

điều này đã làm việc cho tôi. cho tôi biết về bạn.

Được nhưng tôi thích sử dụng cách này, để bất cứ khi nào không có hình ảnh gốc, bạn có thể tải hình ảnh mặc định của mình có thể là mặt cười yêu thích của bạn hoặc hình ảnh nói Xin lỗi! Không khả dụng, nhưng trong trường hợp nếu thiếu cả hai hình ảnh, bạn có thể sử dụng văn bản để hiển thị. nơi bạn cũng có thể bạn cười sau đó. có một cái nhìn gần như bao gồm mọi trường hợp.

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

Đây Kiểm tra đoạn mã bên dưới, Đoạn mã này, tôi đã viết sai chính tả tên hình ảnh. Vì vậy, chỉ vì điều đó nó đang hiển thị hình ảnh thay thế dưới dạng hình ảnh không tìm thấy (404.svg).

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

Cách thông thường để xử lý tình huống này là bằng cách đặt alt thẻ thành một thứ có ý nghĩa.

Nếu bạn muốn một hình ảnh mặc định thay thế, thì tôi khuyên bạn nên sử dụng công nghệ phía máy chủ để cung cấp hình ảnh của bạn, được gọi là sử dụng định dạng tương tự như:

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

Trong ImageHandler.aspxmã, hãy bắt bất kỳ lỗi không tìm thấy tệp nào và default.jpgthay vào đó cung cấp cho bạn .

Bạn có thể hiển thị một văn bản thay thế bằng cách thêm alt:

<img src="my_img.png" alt="alternative text" border="0" /> 

Tôi đã thêm một div cha xung quanh hình ảnh và sử dụng trình xử lý sự kiện onerror sau để ẩn hình ảnh gốc vì trong IE vẫn còn một hình ảnh xấu xí không tìm thấy hình ảnh hiển thị sau khi sử dụng thuộc tính alt:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

Đối với giải pháp thay thế, nếu hình ảnh không tồn tại - không hiển thị gì cả. (những gì tôi đang tìm kiếm)

Bạn có thể hoán đổi hàm từ câu trả lời của Robby Shaw trong thuộc tính "onerror" thành "this.remove ()".

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

Hãy thử sử dụng border=0trong imgthẻ để làm biến mất hình vuông xấu xí.

<img src="someimage.png" border="0" alt="some alternate text" />

Tôi muốn ẩn không gian bị chiếm bởi <img>thẻ để điều này phù hợp với tôi

<img src = "source.jpg" alt = "" >

Nếu bạn muốn một hình ảnh thay thế thay vì một văn bản, bạn cũng có thể sử dụng php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

cách đơn giản để xử lý điều này, chỉ cần thêm một hình nền.

thử PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

nó phù hợp với tôi rằng nếu bạn không muốn sử dụng thuộc tính alt nếu hình ảnh bị hỏng thì bạn có thể sử dụng đoạn mã này và đặt cho phù hợp.

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

Điều này đã làm việc cho tôi. sử dụng srcset. Tôi vừa mới tìm hiểu về nó nên tôi không biết liệu các trình duyệt có hỗ trợ nó hay không nhưng nó đã hoạt động với tôi. Hãy thử nó và sau đó trả lại cho tôi nguồn cấp dữ liệu của bạn.

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

Giải pháp - Tôi đã xóa các phần tử chiều cao và chiều rộng của img và sau đó văn bản thay thế hoạt động.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

ĐẾN

<img src="smiley.gif" alt="Smiley face" />

Cảm ơn tất cả.