Szymon Toda
Szymon Toda

Reputation: 4516

if <img src=""> but no image

When trying to display image that's adress doesn't exist you will see default browsers "no image" badge.

How to change it to default "no-image.png" placeholder?

echo "<img src='http://www.google.com/trolol.png'>"; //for example

Upvotes: 2

Views: 10927

Answers (5)

Sliq
Sliq

Reputation: 16494

As you asked for a PHP solution:

if (file_exists($filename)) {
  echo "i_exist.jpg";
} else {
  echo "fallback.jpg";
}

IMPORTANT: Works only for local files, not for remote ones! Thanks to Szymon for the comment!

Upvotes: 0

Shyju
Shyju

Reputation: 218842

<img src='http://www.google.com/trolol.png' onerror="this.src='http://jsfiddle.net/img/logo.png'">​

sample http://jsfiddle.net/UPdZh/1/

The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image).

Syntax

<element onerror="SomeJavaScriptCode">

http://wap.w3schools.com/jsref/event_onerror.asp

Upvotes: 5

SmileyWar
SmileyWar

Reputation: 25

Try this

<?php
$filename = 'http://www.google.com/trolol.png';

if (file_exists($filename)) {
    echo "The file $filename exists";
} else {
    echo "The file $filename does not exist";
}
?>

Upvotes: 0

1321941
1321941

Reputation: 2180

<?php
$filename = 'http://www.google.com/trolol.png';

if (file_exists($filename)) {
    echo "<img src='".$filename."'>";
} else {
    echo "<img src='no-image.png'>";
}
?>

Upvotes: 1

MacMac
MacMac

Reputation: 35341

You can use the onerror attribute, example:

<img src="" onerror="this.src = 'no-image.png';" alt="" />

Demo: http://jsfiddle.net/kNgYK/

Upvotes: 18

Related Questions