代码之家  ›  专栏  ›  技术社区  ›  Lluís Puig Ferrer

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

  •  1
  • Lluís Puig Ferrer  · 技术社区  · 7 年前

    我会解释代码,看看有没有人能帮我。

    <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。

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

    2 回复  |  直到 7 年前
        1
  •  4
  •   Community CDub    3 年前

    你可以试着注射一种透明的 base64-image

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

    在OP的问题后编辑:

    让我们看看图像src:

    第一:

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

    这将告诉浏览器如何显示下面的代码。上面说 MIME-Type .png 编码是base64,基本上就是字符串中的图像数据。

    之后,实际数据如下:

    iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

    如果你想知道它的具体工作原理,请阅读 https://www.rfc-editor.org/rfc/rfc3548 或者单击下面的链接 进一步阅读 .

        2
  •  0
  •   Steeve    7 年前