To display the image circular even the image is not loaded - html

Question

I am displaying the images in a circular way inside a div tag like this:
My issue is: Suppose an image(ex 2nd image) is not loaded/ present. Even then it should display it in a circular manner. But it is displaying in a square like below image:
I want image tag to be circular even though the image is not present.
Fiddle link

Answer 1

Then also it should display in circular. But it is displaying as square like below image
I'd argue that you probably want to fallback to some other image or some other placeholder. You can achieve it like so:
<img src="https://material.angul.io/assets/img/examples/shiba2.jpg"
class="company"
onerror="this.src='https://via.placeholder.com/70x70'">
Note the onerror. You can attach a handler function to do more complex things like hiding the img element, and showing some other placeholder element.

Answer 2

You can use CSS clip-path to force a circular cut-out, which will then apply to any image that you try to put in (good or broken).
Demo:
.image { width: 60px; height: 60px; }
.clip-circle { clip-path: circle(30px at center); }
<div style="background: #ffddcc">
Broken images: <img src="does-not-exist.png" class="image">
<img src="does-not-exist.png" class="image clip-circle">
</div>
<br />
<div style="background: #ffddcc">
Good images: <img src="https://via.placeholder.com/60x60" class="image">
<img src="https://via.placeholder.com/60x60" class="image clip-circle">
</div>
Not sure if this gives a better display than the other answers... but at least it answers the question :-) Also, browser support for this is not quite universal: see https://caniuse.com/#feat=css-clip-path.

Answer 3

In this scenario you have to use Javascript because you can't know with HTML/CSS if an image is broken
So here is a solution to either hide the image or replace it with another image just like #MrSaints has mentioned
To Hide:
<img src="Error.src" onerror="this.style.display='none'"/>
To Replace:
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
Javascript solution for multiple broken images:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

Answer 4

You can put the images in div and apply the radius on the div by adding overflow:hidden
.img-container{
border-radius: 50%;
height:70pt;
width:70pt;
float: left;
overflow:hidden;
margin:5px;
}
img{
height:70pt;
width:70pt;
}
<div class="img-container"><img src="https://material.angular.io/assets/img/examples/shiba2.jpg" class="company"></div>
<div class="img-container"><img src="https://material.angular.io/assets/img/examples/shiba2.jpg" class="company"></div>

Answer 5

AFAIK we can't make the invalid image tag as circular. But we can do some workarounds by wrapping the img tag in a div and then specifying border-radius: 50%; overflow: hidden to the div and enclose the image within.
.company {
border-radius: 50%;
height: 100%;
width: 100%;
}
div {
border-radius: 50%;
height: 70pt;
width: 70pt;
float: left;
overflow: hidden;
border: 1px solid #555;
}
<div><img src="https://material.angular.io/assets/img/examples/shiba2.jpg" class="company">
</div>
<div>
<img src="https://material.angular.io/assets/img/examples/shib2.jpg" class="company">
</div>
JSFiddle

Answer 6

You can tackle this issue with JS as #MrSaints is showing, but also this can fail as well. I was thinking more as a CSS solution and defaulting this to a color/nothing, but keep the circle shape.
.circle-image {
height:70pt;
width:70pt;
float: left;
border-radius: 50%;
margin: 5px;
background-size: cover;
background-position: center;
background-color: transparent;
background-image: url('https://material.angular.io/assets/img/examples/shiba2.jpg');
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
box-sizing: border-box;
}
.broken-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba2.jpgssss');
}
<div class="circle-image">
</div>
<div class="circle-image broken-image">
</div>