画像が見つからない場合のHTML

HTMLページに画像があります。

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

サーバー上で画像が見つからない場合は、醜い空白の四角が表示されます。

画像が見つからない場合、何も表示しないか、サーバー上にあることがわかっているデフォルトの画像が表示されるようにしたいと思います。

これはどのように行うことができますか？

あなたの問題を解決する最良の方法：

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

onerror あなたにとって良いことです:)

画像ファイル名を変更して、自分で試してください。

さて、あなたはこれを試すことができます。

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

これは私のために働いた。あなたについて教えてください。

わかりましたが、私はこの方法を使用したいので、元の画像が利用できないときはいつでも、お気に入りのスマイリーまたは申し訳ありませんと言っている画像であるデフォルトの画像をロードできます。利用できませんが、両方の画像がない場合は、テキストを使用して表示できます。ここであなたもスマイリーできます。ほぼすべてのケースをカバーしています。

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

ここで、以下のコードスニペットを確認してください。このコードスニペットでは、画像名のスペルを間違えています。したがって、それだけで代替画像が見つからない画像（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="">

このシナリオを処理する通常の方法は、altタグを意味のあるものに設定することです。

代わりにデフォルトの画像が必要な場合は、サーバーサイドテクノロジーを使用して画像を提供することをお勧めします。

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

ではImageHandler.aspx、コード、任意のファイル・見つからないエラーをキャッチし、あなたのアップに役立つdefault.jpg代わりに。

以下を追加することにより、代替テキストを表示できますalt。

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

画像の周りに親divを追加し、次のonerrorイベントハンドラーを使用して元の画像を非表示にしました。これは、IEでは、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>

別の方法として、画像が存在しない場合-何も表示しません。（私が探していたもの）

「onerror」属性のRobby Shawの回答から「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">

タグでを使用border=0してimg、醜い四角が消えるようにしてください。

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

<img>タグが占めるスペースを非表示にしたかったので、これでうまくいきました

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

テキストの代わりに代替画像が必要な場合は、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";
}

これを処理する簡単な方法は、背景画像を追加するだけです。

PHPを試す

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

画像が壊れた場合にalt属性を使用したくない場合は、このコードを使用して適切に設定できるというのが私の働きです。

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

これは私のために働いた。srcsetを使用します。私はちょうどそれについて学んだので、ブラウザがそれをサポートするかどうかわかりませんが、私にとってはうまくいきました。それを試して、後で私にあなたのフィードバックをください。

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

解決策-imgの高さと幅の要素を削除したところ、代替テキストが機能しました。

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

に

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

皆さん、ありがとうございました。