HTML jika gambar tidak ditemukan

Saya memiliki gambar di halaman HTML:

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

Jika gambar tidak ditemukan di server, itu menunjukkan kotak kosong yang jelek.

Saya ingin membuatnya sehingga jika gambar tidak ditemukan, tidak akan menampilkan apa pun atau beberapa gambar default lain yang saya tahu pasti ada di server.

Bagaimana ini bisa dilakukan?

Cara terbaik untuk menyelesaikan masalah Anda:

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

onerror adalah hal yang baik untukmu :)

Ubah saja nama file gambar dan coba sendiri.

Anda bisa mencobanya.

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

ini berhasil untuk saya. beri tahu saya tentang Anda.

Oke, tapi saya suka menggunakan cara ini, sehingga setiap kali gambar asli tidak tersedia, Anda dapat memuat gambar default yang mungkin merupakan smiley favorit Anda atau gambar yang bertuliskan Maaf! Tidak Tersedia, Tetapi jika kedua gambar hilang Anda dapat menggunakan teks untuk ditampilkan. di mana Anda juga bisa tersenyum. Lihat hampir semua kasus.

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

Di sini Periksa potongan kode di bawah ini yang, Dalam hal ini, saya salah mengeja nama gambar. Jadi, hanya karena itu ditampilkan gambar alternatif sebagai gambar tidak ditemukan (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="">

Cara biasa untuk menangani skenario ini adalah dengan menyetel alttag ke sesuatu yang bermakna.

Jika Anda menginginkan gambar default, maka saya sarankan menggunakan teknologi sisi server untuk menyajikan gambar Anda, disebut menggunakan format yang mirip dengan:

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

Dalam ImageHandler.aspxkode, tangkap kesalahan file-tidak ditemukan dan sajikan default.jpgsebagai gantinya.

Anda dapat menampilkan teks alternatif dengan menambahkan alt:

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

Saya menambahkan div induk di sekitar gambar dan menggunakan event handler onerror berikut untuk menyembunyikan gambar asli karena di IE masih ada gambar jelek yang tidak ditemukan gambar yang ditampilkan setelah menggunakan atribut 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>

Sebagai alternatif, jika gambar tidak ada - tunjukkan apa-apa. (apa yang saya cari)

Anda dapat menukar fungsi dari jawaban Robby Shaw di atribut "onerror" menjadi "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">

Coba gunakan border=0di imgtag untuk menghilangkan kotak jelek.

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

Saya ingin menyembunyikan ruang yang ditempati oleh <img>tag jadi ini berhasil untuk saya

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

Jika Anda menginginkan gambar alternatif daripada teks, Anda juga dapat menggunakan 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";
}

cara sederhana untuk menangani ini, cukup tambahkan gambar latar belakang.

coba PHP

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

ini bekerja untuk saya bahwa jika Anda tidak ingin menggunakan atribut alt jika gambar rusak maka Anda dapat menggunakan bagian kode ini dan mengaturnya sesuai.

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

Yang ini berhasil untuk saya. menggunakan srcset. Saya baru saja mempelajarinya jadi saya tidak tahu apakah browser mendukungnya tetapi berhasil untuk saya. Cobalah dan nanti beri aku umpan balikmu.

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

Solusi - Saya menghapus elemen tinggi dan lebar dari img dan kemudian teks alt berfungsi.

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

UNTUK

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

Terima kasih semua.