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

Posted 2023-03-14

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

【英文标题】：How to hide image broken icon without hiding all the style?

【发布时间】：2018-01-17 05:23:14

【问题描述】：

我会解释代码，让我们看看是否有人可以帮助我。

我有这个代码：

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

非常感谢，任何帮助将不胜感激。

【问题讨论】：

只删除图标img??我不明白，你要删除什么？

我想在 img 还没有加载的时候移除图片损坏的图标

也许使用透明占位符img？

JS，对不起@ADyson

jQuery or javascript check if image loaded的可能重复

【参考方案1】：

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

【参考方案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（在 *** 上）

How to display Base64 images in HTML（在 *** 上）

Base64 image converter

Base64 on Wikipedia

【讨论】：

它可以工作@TomM，但不了解该行的任何内容，只是this.src，可以解释一下吗？我也会读你的href。谢谢

哦，好吧，我已经更新了答案。无论如何，不​​客气