src without image does not disappear

Question

src without image does not disappear

Asked 5 years ago

Viewed 196 times

1

I am using the JSON database and I have a problem: when there is an image in JSON, instead of the tag <img> does not appear, it appears as if the image of that error:

Is there any way when the src not found in JSON, tag img not show up?

Code:

var image3: obj.imagem3;
var image: obj.imagem;

$("#imagemareas3").attr("src", this.image3);
$("#imagemareas").attr("src", this.image);


<img class="imageminfo" id="imagemareas" src="">
<img class="imageminfo" id="imagemareas3" src="">

JSON:

[    
    {
        "titulo": "Exemplo",
        "imagem": "",
        "imagem3": "",
        "id": 0
    }
]

2

Yes, do not insert the image on the page\(ツ)/¯

– Woss

2019/06/12 at 11:40
@Andersoncarloswoss but I need it because in other json arrays there already has an image but in case it doesn’t have an image it disappears

– David Mv

2019/06/12 at 11:41
3

Exactly. It makes no sense for you to insert the element <img> on the page if the src will be empty.

– Woss

2019/06/12 at 11:42
2

If you’re interested, did you know that you can style and customize an image that doesn’t load? It does not need to appear so you can treat the image that fails to load, read more here https://answall.com/questions/321138/comort-do-um-stilo-para-broken imagem-quando-imagem-n%C3%A3o-load

– hugocsl

2019/06/12 at 11:44

1 answer

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.

by Hiago Souza • **5,837** points · Answer 1 · 2019-06-12T11:42:59+00:00

The ideal would be the TAG img nor exist in the DOM and not hide the same. As I noticed that makes use of jQuery, I leave below some options with the framework and also an option with CSS (that would not recommend, since you do not want the image in the DOM).

Option 1 (recommended)

You could add the images in the DOM, only if the address was not empty. Below is an example:

html

<!-- div onde as imagens vão ser renderizadas -->
<div id="images"></div>

javascript

// código javascript para adicionar elas na div
if(obj.imagem)
   $('#images').append('<img src="'+obj.imagem+'" />');
if(obj.imagem3)
   $('#images').append('<img src="'+obj.imagem3+'" />');

Option 2

You can also remove the DOM image if the property is not filled in. Below is an example:

this.image3 ? $("#imagemareas3").attr("src", this.image3) : $("#imagemareas3").remove();
this.image ? $("#imagemareas").attr("src", this.image) : $("#imagemareas").remove();

Option 3

But in case you insist on maintaining TAG in the DOM you can make use of the CSS to hide the image (remember that it is only an outline solution and do not recommend the use), follows example:

img[src=""],img[src="null"], img[src="undefined"] {
     display: none;
}