How to display div only when img src exist?

Question

<a class="thumbnail-link" href="">
<div id="thumbnail-wrap" class="thumbnail-wrap">
<img width="600" height="360" src="image.jpg">
</div>
</a>

How do I show thumbnail-link div if there is image?

Opossite solution would be...

<script type="text/javascript">

jQuery(document).ready(function( $ ) {

    $(".thumb-summary").find("img[src='']").parent().hide();

});
</script>

But than, its visible on page load that it hides divs without image and looks bad. I want to make it only show images if it finds them, jquery way please.

How is markup generated? Seems cleaner not to render the `` and parent if there is no `src` — charlietfl, Mar 31 '19 at 14:18
Check this answer to know if the image exists : https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript — Julien Revault d'A..., Mar 31 '19 at 15:09

Pranav C Balan · Accepted Answer · 2019-03-31T14:27:04.740

Initially hide all the parent element which is .thumbnail-wrap using CSS and later show elements which have an attribute value, use :not() pseudo-class selector to ignore all img tag with src empty.

CSS :

.thumb-summary .thumbnail-wrap{
   display:none;
}

JQUERY :

jQuery(document).ready(function( $ ) {
    $(".thumb-summary").find("img:not([src=''])").parent().show();
    // or 
    //  $(".thumb-summary .thumbnail-wrap:has(img:not([src='']))").show();
});

FYI : If you have access to backend code then add some class to the parent element based on src and add style to that particular class(for hiding).

Works! Fix dispaly:hide; to display: none; . – Ljeljiljelji Mar 31 '19 at 14:21 — Ljeljiljelji, Mar 31 '19 at 14:21

How to display div only when img src exist?

1 Answers1