Сделать заглушку для тех пользователей кто не загрузил аватар

АгроТехно
АгроТехно
  • Сообщений: 5
  • Последний визит: 25 марта 2025 в 21:54

У меня в системе есть пользователи, некоторые из них не загрузили аватарки и сейчас от этого список пользователей выглядит не красиво, так как нет заглушки, точнее в системе она была но наши разработчики зачем то ее удалили.
Можете помочь сделать заглушку на CSS для тех пользователей кто не загрузил аватар. Пример моего кода:

 
<a href="/users/4601"><img src="/upload/046/u4601/ce/18/f484d6b0.jpg" alt=«Екатерина» title=«Екатерина»></a>
 


И вот CSS

 
.striped-list .item .icon img {
display: block;
height: 50px;
width: 50px;
transition: all 0.3s ease 0s;
}
 

Так же из-за того, что нет заглушки отображается alt=«Екатерина».

Редактировалось: 1 раз (Последний: 17 января 2025 в 22:11)
Евгений Громов
Евгений Громов
  • Сообщений: 3
  • Последний визит: 4 апреля 2025 в 08:35

Мы можем использовать CSS для отображения стандартного изображения-заглушки, если аватарка отсутствует. Вот пример, как это можно сделать:
1. Добавьте стандартное изображение-заглушку в ваш проект, например, default-avatar.png.
2. Обновите ваш CSS для отображения заглушки, если аватарка отсутствует:

 
.striped-list .item .icon img {
display: block;
height: 50px;
width: 50px;
transition: all 0.3s ease 0s;
object-fit: cover;
}
 
 
.striped-list .item .icon img[alt=""] {
content: url('/path/to/default-avatar.png');
}
 

1. Обновите HTML для использования атрибута alt как индикатора отсутствия аватарки:
<br>
<a href="/users/4601">
<img src="/upload/046/u4601/ce/18/f484d6b0.jpg" alt="" title="Екатерина">
</a>
 


В этом примере, если атрибут alt пустой, CSS заменит изображение на заглушку. Вы можете настроить путь к заглушке в content: url('/path/to/default-avatar.png'); в соответствии с вашим проектом.

Редактировалось: 1 раз (Последний: 17 января 2025 в 22:08)
Авторизуйтесь, чтобы писать на форуме.