How to hide image broken Icon using only CSS/HTML?

前端 未结 17 1755
不思量自难忘°
不思量自难忘° 2020-11-27 09:14

How can I hide the broken image icon? Example: \"Example\"

I have an image with error src:

17条回答
  •  南方客
    南方客 (楼主)
    2020-11-27 09:54

    I liked the answer by Nick and was playing around with this solution. Found a cleaner method. Since ::before/::after pseudos don't work on replaced elements like img and object they will only work if the object data (src) is not loaded. It keeps the HTML more clean and will only add the pseudo if the object fails to load.

    object {
      position: relative;
      float: left;
      display: block;
      width: 200px;
      height: 200px;
      margin-right: 20px;
      border: 1px solid black;
    }
    object::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      content: '';
      background: red url("http://placehold.it/200x200");
    }
    
    
    

提交回复
热议问题