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。

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

在OP提出问题后进行编辑：

Base64是一种图像格式，可让您“编写”＃34;将图像直接放入HTML文件中，而不是包含外部图像。

让我们看一下图像src：

首先：

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

这将告诉浏览器如何显示后面的代码。它说src的MIME-Type（在本例中为File Type）是.png，编码是base64，它基本上只是String中的图像数据。

之后，实际数据如下：

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

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

进一步阅读

Embedding Base64 Images（在Stackoverflow上）
How to display Base64 images in HTML?（在Stackoverflow上）
Base64 image converter
Base64 on Wikipedia

Answer 2

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

如何隐藏图像破碎图标而不隐藏所有样式？

2 个答案: