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
How to Preload Images Without JavaScript
Transparent Scrollbar with CSS
Internet Explorer and Clip-Path
Using: After to Clear Floating Elements
How to Remove The Horizontal Scrollbar in a Div
Draw Svg on HTML5 Canvas with Support for Font Element
What Is a Non-Replaced Inline Element
Make Tbody Scrollable in Webkit Browsers
How Does Stackoverflow Make Its Tag Input Field
CSS Padding Is Not Working in Outlook
Is There a 'Pointer-Events:Hoveronly' or Similar in CSS
How to Display HTML <Form> as Inline Element
Xpath to Select Between Two HTML Comments Is Not Working
How to Center Multiple Divs Inside a Container in CSS
How to Get Index of Parent Element Using Watir Webdriver
Hide Text, But Have It Show Up If Copied and Pasted Without JavaScript