如何隐藏图像破碎的图标，而不隐藏所有的风格？

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

但我不要隐藏所有的风格，我想要有背景，边框等。只能删除图标img。

知道如何用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（在这种情况下，文件类型）是.png，编码是base64，它基本上只是字符串中的图像数据。

在此之后，实际数据如下：

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

这些只是代表像像素，颜色，α-等的图像数据的字母。 如果您想知道它的工作原理，请阅读https://tools.ietf.org/html/rfc3548或点击下的链接进一步阅读。

进一步阅读

• Embedding Base64 Images（＃1）

• How to display Base64 images in HTML?（＃1）

• Base64 image converter

• Base64 on Wikipedia