Question for the HTML5 Brainiacs of GFY - GoFuckYourself.com

2MuchMark · 08-28-2016, 04:09 PM

Greetgins and salutations!

I have a question for the HTML5 gurus:

How can I display a default image in HTML5 if the image I want is not available?

Here's a piece of code:

<div style="background-image: url(images20/intro.jpg);">

But in certain circumstances, the file named intro.jpg will not always exist. So when this file does not exist, I want it to load a different image. For example, default.jpg

I can do this already with a standard IMG tag, like this:

<img id="currentPhoto" src="intro.jpg" onerror="this.src='Default.jpg'">

But how do I do it when using a background image in a div?

sarettah · 08-28-2016, 04:33 PM

<div style="background-image: url(images20/intro.jpg), url(default.jpg);">

That should use default.jpg as a fallback if the intro.jpg is not available.

.

2MuchMark · 08-28-2016, 05:27 PM

Thanks sarettah, but this doesn't seem to work for me

Maybe the format is wrong?

Here's the full line:

<div style="background-image: url(/images20/##Namevar##.jpg), url(/images20/default.jpg);">

(Namevar is dynamic. If the name doesn't exist, it should load default.jpg. but it dont dag nabbit!)

moeloubani · 08-28-2016, 05:37 PM

why not bust one of these:

<div class="image-with-default" style="background-image: url(image.jpg)">

then in your CSS just add an image there as the default with the image-with-default class

edit: no that wont work, i guess the first one would be overwritten, why not check if namevar exists and if it doesnt dont put in that line with the style stuff at all

sarettah · 08-29-2016, 12:17 AM

Quote:

Originally Posted by **********

Thanks sarettah, but this doesn't seem to work for me

Maybe the format is wrong?

Here's the full line:

<div style="background-image: url(/images20/##Namevar##.jpg), url(/images20/default.jpg);">

(Namevar is dynamic. If the name doesn't exist, it should load default.jpg. but it dont dag nabbit!)

Works for me when I test it. http://madspiders.com/htmltest.html

Tried it in both chrome and firefox and both show the default image when the intro image is not there and show the intro image when it is there. Right now it should be showing the default.jpg because I renamed the intro.jpg to move it out of the way.

Only difference in what code I am using is I have given a width and height attribute because otherwise it is an empty div without any size and won't show at all. I figured you probably had something in the div or had size attributes assigned in a style sheet, but I could be wrong about that.

The code I have in there:

Code:

<html>
  <head>
  <title></title>
  </head>
  <body>
  <div style="width:500px;height:500px;background-image: url(images20/intro.jpg), url(images20/default.jpg);"><div>
  </body>
</html>

.

sarettah · 08-29-2016, 07:47 AM

Reworked it a few minutes ago using the exact same syntax you showed and it still works for me so I am guessing that you did not have any size attributes assigned to the div and it was empty so it did not show.

Code:

<html>
  <head>
  <title></title>
  </head>
  <body>
  <div style="width:500px;height:500px;background-image: url(images20/##Namevar##.jpg), url(images20/default.jpg);"><div>
  </body>
</html>

2MuchMark · 08-29-2016, 09:19 AM

Thanks! I will try it again.

2MuchMark · 08-29-2016, 11:57 AM

Hey Sarettah, thanks for your help! I got it to work. It originally wasn't working for me because my image variable had a space character in it.

So
if image name = "ThisImage.jpg", then display it.
if image name = "SomeOtherImage.jpg" then display default.
if image name = "Some other Image.jpg" then display nothing, which was what it was doing.

Thanks again!

08-28-2016, 04:09 PM	#1
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 45,739	Question for the HTML5 Brainiacs of GFY Greetgins and salutations! I have a question for the HTML5 gurus: How can I display a default image in HTML5 if the image I want is not available? Here's a piece of code: <div style="background-image: url(images20/intro.jpg);"> But in certain circumstances, the file named intro.jpg will not always exist. So when this file does not exist, I want it to load a different image. For example, default.jpg I can do this already with a standard IMG tag, like this: <img id="currentPhoto" src="intro.jpg" onerror="this.src='Default.jpg'"> But how do I do it when using a background image in a div? __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

08-28-2016, 05:27 PM	#3
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 45,739	Thanks sarettah, but this doesn't seem to work for me Maybe the format is wrong? Here's the full line: <div style="background-image: url(/images20/##Namevar##.jpg), url(/images20/default.jpg);"> (Namevar is dynamic. If the name doesn't exist, it should load default.jpg. but it dont dag nabbit!) __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

08-29-2016, 07:47 AM	#6
sarettah l8r Industry Role: Join Date: Oct 2002 Posts: 13,488	Reworked it a few minutes ago using the exact same syntax you showed and it still works for me so I am guessing that you did not have any size attributes assigned to the div and it was empty so it did not show. Code: <html> <head> <title></title> </head> <body> <div style="width:500px;height:500px;background-image: url(images20/##Namevar##.jpg), url(images20/default.jpg);"><div> </body> </html>

08-29-2016, 09:19 AM	#7
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 45,739	Thanks! I will try it again. __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

08-29-2016, 11:57 AM	#8
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 45,739	Hey Sarettah, thanks for your help! I got it to work. It originally wasn't working for me because my image variable had a space character in it. So if image name = "ThisImage.jpg", then display it. if image name = "SomeOtherImage.jpg" then display default. if image name = "Some other Image.jpg" then display nothing, which was what it was doing. Thanks again! __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

08-28-2016, 04:33 PM	#2
sarettah l8r Industry Role: Join Date: Oct 2002 Posts: 13,488	<div style="background-image: url(images20/intro.jpg), url(default.jpg);"> That should use default.jpg as a fallback if the intro.jpg is not available. .

08-28-2016, 05:37 PM	#4
moeloubani Confirmed User Industry Role: Join Date: Dec 2007 Location: Ontario Posts: 4,235	why not bust one of these: <div class="image-with-default" style="background-image: url(image.jpg)"> then in your CSS just add an image there as the default with the image-with-default class edit: no that wont work, i guess the first one would be overwritten, why not check if namevar exists and if it doesnt dont put in that line with the style stuff at all