如何在不隐藏所有样式的情况下隐藏图像损坏的图标？

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

问题是您将 class 和 img 标签一起分配。因此，如果您在图像标签内分配类，然后在该类中引用背景图像，它将仅显示损坏的图像，因为它已经开始引用两个图像标签，因此解决方案是您使用 div 而不是 img 标签并看到魔法。损坏的图像图标根本不会出现，背景图像将按预期显示

Answer 2

您可以尝试在出错时注入透明的base64-image。

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

在 OP 提出问题后编辑：

Base64 是一种图像格式，允许您将图像直接“写入”到 HTML 文件中，而不是包含外部图像。

我们看一下图片src：

第一：

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

这将告诉浏览器如何显示后面的代码。它说src的MIME-Type（在本例中为文件类型）是.png，编码是base64，基本上只是一个字符串中的图像数据。

之后，实际数据如下：

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

这些只是表示像素、颜色、alpha 等图像数据的字母。 如果您想知道它是如何工作的，请阅读https://www.rfc-editor.org/rfc/rfc3548 或点击进一步阅读下的链接。

进一步阅读

• Embedding Base64 Images（在 Stackoverflow 上）

• How to display Base64 images in HTML（在 Stackoverflow 上）

• Base64 image converter

• Base64 on Wikipedia