即使未加载图像也要显示圆形图像

Question

我正在div标签内以圆形方式显示图像，如下所示：

我的问题是：假设未加载/存在图片（第2张图片）。即使这样，它也应该以循环方式显示。但是它以如下图所示的正方形显示：

即使图像不存在，我也希望图像标签是圆形的。

提琴link

Answer 1

  

然后它也应该以圆形显示。但是它像下面的图片一样显示为正方形

我认为您可能想回退到其他图片或其他占位符。您可以这样实现：

<img src="https://material.angul.io/assets/img/examples/shiba2.jpg" 
     class="company" 
     onerror="this.src='https://via.placeholder.com/70x70'">

请注意onerror。您可以附加处理程序函数来执行更复杂的操作，例如隐藏img元素，并显示其他占位符元素。

Answer 2

您可以使用CSS clip-path强制执行圆形切口，然后将其应用于您尝试放入的任何图像（良好或损坏的图像）。

演示：

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

不确定是否能比其他答案更好地显示...，但至少可以回答问题：-)此外，浏览器对此的支持还不是很普遍：请参见https://caniuse.com/#feat=css-clip-path。

Answer 3

在这种情况下，您必须使用Javascript，因为您不知道HTML / CSS是否会损坏图像

因此，这是一种隐藏图像或将其替换为另一幅图像的解决方案，就像@MrSaints提到的那样

要隐藏：

<img src="Error.src" onerror="this.style.display='none'"/>

要替换：

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

针对多个损坏图像的Javascript解决方案：

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

您可以将图像放在div中，并通过添加overflow:hidden

在div上应用半径

.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

我们不能将无效的图片标签设为圆形。但是我们可以通过以下方法来解决这些问题：将img标签包裹在div中，然后将border-radius: 50%; overflow: hidden指定给div并将图像括在其中。

.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

您可以使用@MrSaints显示的JS解决此问题，但这也可能失败。我更多地考虑将其作为CSS解决方案，并将其默认设置为不显示颜色/颜色，但保持圆形。

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