Для отображения изображения круглым, даже изображение не загружено

Question

Я отображаю изображения по кругу внутри тега div, например:

Моя проблема: Предположим, что изображение (кроме 2-го изображения) не загружено / не присутствует.Даже тогда он должен отображать это по кругу.Но оно отображается в виде квадрата, как показано ниже:

Я хочу, чтобы тег изображения был круглым, даже если изображение отсутствует.

Скрипка ссылка

Answer 1

Вы можете использовать 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 2

Вы можете решить эту проблему с помощью JS, как показывает @MrSaints, но это также может привести к сбою.Я больше думал как решение 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>

Answer 3

AFAIK мы не можем сделать недействительный тег изображения круглым.Но мы можем сделать некоторые обходные пути, обернув тег 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 4

Вы можете поместить изображения в div и применить радиус к div, добавив 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

В этом сценарии вы должны использовать 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 6

Тогда также он должен отображаться по кругу.Но оно отображается в виде квадрата, как показано ниже:

Я бы сказал, что вы, вероятно, хотите использовать другое изображение или другой заполнитель.Вы можете достичь этого следующим образом:

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

Обратите внимание на onerror.Вы можете прикрепить функцию-обработчик для выполнения более сложных задач, таких как скрытие элемента img и показ другого элемента-заполнителя.