すべてのスタイルを隠すことなくイメージの壊れたアイコンを隠すには？

Question

コードを説明し、誰かが私を助けることができるかどうかを見てみましょう。

私はこのコードを持っている：

<table> 
     <tr> 
      <td> 
       <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;"> 
       <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp" style="display:none;"> 
      </td> 
      <td> 
       <img src="" id="img2" class="img2" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;"> 
       <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp" style="display:none;"><br> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" name="" value="Seleccionar header" id="browse_file" class="btn btn-danger form-control"> 
      </td> 
      <td> 
       <input type="button" name="" value="Seleccionar home" id="browse_file2" class="btn btn-danger form-control"> 
      </td> 
     </tr> 
</table> 

そして、これはあまりにもコードをJS：

$("#browse_file").on('click',function(e){ 
     $("#pathheader").click(); 
    }) 
    $("#browse_file2").on('click',function(e){ 
     $("#pathhome").click(); 
    }) 
    $("#pathheader").on('change',function(e){ 
     var fileInput=this; 
     if (fileInput.files[0]) 
      { 
       var reader=new FileReader(); 
       reader.onload=function(e) 
       { 
        $("#img").attr('src',e.target.result); 
       } 
       reader.readAsDataURL(fileInput.files[0]); 
      } 
    }) 
    $("#pathhome").on('change',function(e){ 
     var fileInput=this; 
     if (fileInput.files[0]) 
      { 
       var reader=new FileReader(); 
       reader.onload=function(e) 
       { 
        $("#img2").attr('src',e.target.result); 
       } 
       reader.readAsDataURL(fileInput.files[0]); 
      } 
    }) 

私は他の質問を読んで、それを行うことが可能です。「

onerror="this.style.display='none'" 

しかし、私はドンをすべてのスタイルを非表示にしたい、私は背景、境界線などを持っていると思います。

Ajaxでそれを行う方法を知っていますか？そうでない場合は、CSSで可能でしょうか？

ありがとう、どんな助けもありがとうございます。

Answer 1

エラーが発生した場合は、透明なbase64-imageを注入できます。 OPからの質問の後

onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='" 

編集：

Base64では、外部画像を含むのではなく、あなたのHTMLファイルに直接画像を「書き込む」ことを可能にする画像フォーマットです。

はのは、画像SRCを見てみましょう：

まず：

<img src="data:image/png;base64...

これは、次のコードを表示する方法ブラウザを教えてくれます。 srcのMIME-Type（この場合はFile Type）は.pngであり、エンコーディングは基本的にStringの画像データであるbase64であると言います。

はその後、実際のデータは次のとおり

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

これらはそう上の画素、色、アルファなどの画像データを表すだけの文字です。 正確な動作を知りたい場合は、https://tools.ietf.org/html/rfc3548を読んだり、のリンクをクリックしてください。

また読書

• Embedding Base64 Images

• Base64 image converter

• Base64 on Wikipedia

（StackOverflowの上）

How to display Base64 images in HTML?（stackoverflowの上）