How to hide image broken icon without hiding all the style?

Question

I will explain the code and let's see if someone can help me.

I have this code:

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

And this JS code too:

$("#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]);
            }
    })

I read other questions and it's possible to make:

onerror="this.style.display='none'"

But I don't want to hide all the style, I want to have the background, border, etc. Only remove the icon img.

Know how to do it with Ajax? If not, it's possible with CSS?

Thanks a lot, any help will be appreciated.

_Only remove the icon img_?? I don't understand, what do you want to remove? — Milan Chheda, Aug 09 '17 at 10:55
I want to remove the image broken icon when img isn't loaded yet — Lluís Puig Ferrer, Aug 09 '17 at 10:56
Possible duplicate of [jQuery or Javascript check if image loaded](https://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded) — Milan Chheda, Aug 09 '17 at 10:58
If you just want to hide the image, then probably you could set the "src" to a blank image that makes it look like there's nothing there. — ADyson, Aug 09 '17 at 10:58

score 4 · Accepted Answer · edited Oct 07 '21 at 08:57

You could try injecting a transparent base64-image on error.

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

Edit after a question from OP:

Base64 is an image format that allows you to "write" an image directly into your HTML file instead of including an external image.

let's look at the image src:

First:

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

This will tell the browser how to display the code that follows. It says that the MIME-Type (in this case, File Type) of the src is .png and that the encoding is base64, which is basically just image data in a String.

After that, the actual Data follows:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

These are just letters representing image data like pixels, colors, alpha and so on. If you want to know how exactly it works, read https://www.rfc-editor.org/rfc/rfc3548 or click through the links under Further Reading.

Further Reading

Embedding Base64 Images (on Stackoverflow)
How to display Base64 images in HTML (on Stackoverflow)
Base64 image converter
Base64 on Wikipedia

It works @TomM but don't understand anything of the line, just the `this.src` , can explain me the line? I will read too your href. Thanks — Lluís Puig Ferrer, Aug 09 '17 at 11:05
oh well, I updated the answer already. Anyways, you're welcome — Tom M, Aug 09 '17 at 11:16

score 0 · Answer 2 · answered Apr 30 '18 at 18:30

Problem is that you are assigning class and img tag together. so if you are assigning class inside image tag and then referring background image in that class it will show broken image only as it has started referring two image tag so the solution is you use div instead of img tag and see the magic. broken image icon will not appear at all and background image will appear as expected

How to hide image broken icon without hiding all the style?

2 Answers2