The default page pictures of several solutions

Now pages pictures everywhere, but can not avoid sometimes failed resource situation picture will be displayed so that Google browser

<img src="logo.jpg" alt="logo">

Here the alt property is to tell the user when the picture information of the picture failed to load

You can beautify about it?

Here are several ways

js way

I believe we run into this problem is that the search results are usually with a picture of the onerrormethod

onerror Event is triggered when an error occurs in a document or image loading process.
In the process of loading a document or image if an error occurs, it will call the event handler.

Also very simple to use

<img src="logo.jpg" alt="logo" onerror="this.src='https://xxx.img/logo.png'">

However, this method must pay attention to ensure that pictures inside onerror address assignment must not be wrong, otherwise, there will be unlimited calling onerror ...

Page directly bounced off ..

Some people say, I can guarantee it. Well, since the guarantee, why there will be front picture fails to load, and enabled backup image happen?

Of course, you can use base64the way, this disadvantage is too similar to the following ..

<img src="logo.jpg" alt="logo" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZu...IIggggCCKAIIgAgiACCIIIIAgigCCIAIIgAgiCCCAIIoAgiACCIAIIQm7xfwIMAADDZPsh5DI6AAAAAElFTkSuQmCC'">

Compatibility is still possible, basically meet the daily development.

Is there a way to solve css it?

Of course, if only compatible with major browsers, then

css way

Here are two ways

Pseudo-element

Although imga single label <img>, which other elements not wrapped, but it may contain a pseudo-element

But here there is a feature only when the picture fails to load or when there is no picture, will be displayed pseudo-elements

That being the case, we can use the default pseudo-element to achieve a prompt effect

img{
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    background: #ccc;
    vertical-align: top;
}
img:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('img/b.jpg') #ccc;
}

The idea is very simple, that is overlaid on the original picture with pseudo-elements, and that the images fail to load no problem, up to a maximum display can also be a solid color background as the default placeholder chart.

Background picture

Another way to use the css3multi-background characteristics of

div{
  background:url(a.jpg),
  url(b.jpg), 
  url(logo.png);
}

Specified, the order of stacking the display image specified in the browser from the top, the first image file is on the top of the last specified file is on the bottom.

In this way we can achieve the default image display

.img{
    width: 200px;
    height: 200px;
    background: url('a.png'),url('logo.png') #f1f1f1
}

But the essence of this approach is to overlap multiple images together, and if one fails to load on, it will see a bottom, meaning that if all loaded successfully, they are actually present. So we should pay attention, if there is a transparent view of the upper part, it is possible to see the bottom of the map, it leaked out!

As above, the two maps are loaded successful, because the upper part transparent, so to see the base map. Therefore, when using this case, it is necessary to use .jpgthe picture, to avoid emptied

Section

Above describes three ways to set the default picture,

From compatibility is concerned, jsthe method most widely adaptable, can lower version compatible ie, the other two to die, just do not pay attention to the backup image wrong address on it

Personally I recommend the second pseudo-element mode, pure cssmode, htmlyou can not do any modification, upgrade experience for existing projects, with the experience better, not would not hurt

A third can take a look at the entertainment when, as a way of thinking, after all, there is no semantic, to one div, others simply do not know if this is a picture, not search engine friendly.

Members junior partner What better way? ^^

---

If you like my blog , you can be a lot of attention