Resim bulunamazsa HTML

HTML sayfasında bir resmim var:

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

Görüntü sunucuda bulunamazsa, çirkin bir boş kare gösterir.

Bunu, bir resim bulunamazsa hiçbir şey göstermeyecek veya kesinlikle sunucuda olduğunu bildiğim başka bir varsayılan resim gösterecek şekilde yapmak istiyorum.

Bu nasıl yapılabilir?

Sorununuzu çözmenin en iyi yolu:

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

onerror senin için iyi bir şey :)

Sadece görüntü dosyasının adını değiştirin ve kendiniz deneyin.

Peki bunu deneyebilirsiniz.

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

bu benim için çalıştı. bana senin hakkında bilgi ver.

Tamam ama ben bu şekilde kullanmayı seviyorum, böylece orijinal görsel mevcut olmadığında en sevdiğiniz gülen yüzünüz veya Üzgünüz diyen varsayılan görselinizi yükleyebilirsiniz! Kullanılamaz, Ancak her iki görüntünün de eksik olması durumunda, görüntülemek için metin kullanabilirsiniz. o zaman nerede de gülümseyebilirsin. bir bakış neredeyse her vakayı kapsar.

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

İşte aşağıdaki kod parçacığını kontrol edin, Bu içinde resim adını yanlış yazdım. Yani, sırf bu yüzden alternatif görüntüyü bulunamadı görüntü olarak gösteriyor (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="">

Alternatif olarak, görüntü yoksa - hiçbir şey göstermeyin. (ne arıyordum)

Fonksiyonu Robby Shaw'un "onerror" özniteliğindeki yanıtından "this.remove ()" olarak değiştirebilirsiniz.

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

Bu senaryoyu halletmenin genel yolu, altetiketi anlamlı bir şeye ayarlamaktır .

Bunun yerine varsayılan bir görüntü istiyorsanız, görsellerinizi sunmak için aşağıdakilere benzer bir biçim kullanarak sunucu tarafı bir teknoloji kullanmanızı öneririz:

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

Kodda, ImageHandler.aspxdosya bulunamadı hatalarını yakalayın ve default.jpgyerine kendi hatanızı sunun .

Şunları ekleyerek alternatif bir metin gösterebilirsiniz alt:

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

Görüntünün etrafına bir ana div ekledim ve orijinal görüntüyü gizlemek için aşağıdaki hata olay işleyicisini kullandım çünkü IE'de alt özniteliğini kullandıktan sonra hala çirkin bir görüntü bulunamayan görüntü gösteriliyordu:

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

Kullanmayı deneyin border=0içinde imgçirkin kare gitmesini sağlamak için etikette.

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

<img>Etiketin kapladığı alanı gizlemek istedim, bu yüzden bu benim için çalıştı

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

Metin yerine alternatif bir resim istiyorsanız, php'yi de kullanabilirsiniz:

$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";
}

bunu halletmenin basit yolu, sadece bir arka plan resmi eklemeniz yeterlidir.

PHP'yi dene

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

Benim için işe yarıyor, eğer alt özniteliği kullanmak istemiyorsanız, eğer görüntü koparsa, o zaman bu kod parçasını kullanabilir ve buna göre ayarlayabilirsiniz.

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

Bu benim için çalıştı. srcset kullanarak. Bunu yeni öğrendim, bu yüzden tarayıcıların destekleyip desteklemediğini bilmiyorum ama benim için çalıştı. Deneyin ve sonra bana beslemenizi geri verin.

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

Çözüm - img'nin yükseklik ve genişlik öğelerini kaldırdım ve ardından alt metni çalıştı.

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

KİME

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

Hepinize teşekkür ederim.