Name of display name (fallback) if Image can not be found using the Web

advertisements

How to display avatar taking letters from name like Google when actual image is not found.

========>

I would prefer a solution creating fallback image using canvas.


HTML and CSS only. Add what ever way you want to detect the img.

.avatar{
    background: #D770AD;
    padding: 10px;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    margin-right: 5px;
    color: #FFFFFF;
  }
<div class="avatar">FL</div>