Fallback Background-Image If Default Doesn't Exist

Fallback background-image if default doesn't exist

You can use multiple backgrounds if there is no transparency involved and they occupy all available space or have the same size:

div{        background-image: url('http://placehold.it/1000x1000'), url('http://placehold.it/500x500');     background-repeat:no-repeat;     background-size: 100%;     height:200px;     width:200px;}
<div></div>

CSS - Extra background image for when the first image doesn't load?

Simple answer:

You could either nest the span inside another span - with the outer span set to use the backup background image. If the inside span's background isn't available, then you'll see the outside one's

Better, more difficult answer:

You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;

Something lile

span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}

Inputting a default image in case the src attribute of an html img is not valid?

You asked for an HTML only solution...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
<title>Object Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<p>
<object data="https://stackoverflow.com/does-not-exist.png" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>

</body>

</html>

CSS or Javascript - display fallback text if background image not loaded

Try it this way:

HTML

<div class="iHaveBgImage">
<p>this text should be displayed if bg image is not loaded</p>
</div>

CSS

.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}

.iHaveBgImage > p {
position: relative;
z-index: -1;
}

Works perfectly https://jsfiddle.net/s0gt2eng/

Fallback CSS background image when setting style with javascript?

No different than CSS

document.body.style.backgroundImage = "url('pics/img.webp'), url('http://placekitten.com/200/300')";

Vuejs change background image url, if image not exist

You would need @error vue event which is basically javascript onerror that can be used to load alternate image when given image url fails.

<div v-for="company in companies">
<div class="company-img tooltip-target b-link" >
<img @error="onImageLoadFailure($event)" :src="'/src/static/img/companies/' + company.code.toLowerCase() + '.png'" />
</div>
</div>

Inside method,

export default {
methods: {
onImageLoadFailure (event) {
event.target.src = '/static/img/companies/default.png'
}
}
}

Update:

Incase the country.code object is not present then change :src to,

:src="'/src/static/img/companies/' + company.code.toLowerCase() + '.png'|| '' "


Related Topics



Leave a reply



Submit