Image Placeholder for Broken Image Link?

Question

Currently users can upload images to my site, and the location of the image is stored in a MySQL table.

When I call the images with the SELECT function, they are loaded via the CSS Style background-image:url('image.jpg')

Currently I have used an IF statement that places a placeholder image in the place of any rows that have column "Image_URL" set to NULL.

if ($row["Image"] != "") {                  
                    echo "<td width='200' rowspan='3'><center><a href='/uploads/".$row["Image"]."' target='_blank'><div class='image-cropper'><div class='rounded' style='background-image:url(\"/uploads/".$row["Image"]."\")'>";
                } else {
                    echo "<td width='200' rowspan='3'><center><a><div class='image-cropper'><div class='rounded' style='background-image:url(\"/images/no-image.jpg\")'";
                }

My method, however, does not work for erroneous links (where the original image has been deleted, or, for some reason, the link is wrong.) It just shows blank, and I can see why, because $row["Image"] != NULL, there is a link there, it's just not linking to an image.

Is there a way to load my placeholder image no-image.jpg when no image is found at the provided link?

My DIVs are merely to make my images circular and centered, so I post them here in case it helps, you may be able to help me adapt these classes to add the placeholder functionality.

.image-cropper {
    max-width: 150px;
    height: auto;
    position: relative;
    overflow: hidden;
}
.rounded {
    display: block;
    margin: 0 auto;
    height: 150px;
    width: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:center no-repeat;
    background-size:cover;
}

The image-cropper and rounded DIV are actually from this site, so thank you to Hiral!

Can you tell what's the format of your pics? Are they all "jpg"? Or they can be different? — Sina, Oct 20 '15 at 07:48
Hi Sina, they can be different, I set the upload form to only allow JPG, GIF, and PNG files. — radiocaf, Oct 20 '15 at 12:58

radiocaf · Answer 1 · 2015-10-20T13:44:12.717

I managed to get it to work using file_exists after stuggling to use glob.

But thank you to Stewartside for putting me on the right path, and also structuring the resulting if statement.

This is the code now:

$image = $row["Image"];
if ($row["Image"] != "") {  
    if (file_exists('uploads/'.$image)) {               
        echo "<td width='200' rowspan='3'><center><a href='/uploads/".$row["Image"]."' target='_blank'><div class='image-cropper'><div class='rounded' style='background-image:url(\"/uploads/".$row["Image"];
    } else {
        echo "<td width='200' rowspan='3'><center><a><div class='image-cropper'><div class='rounded' style='background-image:url(\"/images/no-image.jpg";
    }
    } else {
        echo "<td width='200' rowspan='3'><center><a><div class='image-cropper'><div class='rounded' style='background-image:url(\"/images/no-image.jpg";
}

I assume the following would also work:

    if (file_exists('uploads/'.$row["Image"])) {

Thank you for your help everyone! :)

score 0 · Answer 2 · answered Oct 20 '15 at 08:02

You could use a glob() function to find out if the file exists.

Something along these lines:

if ($row["Image"] != "") {
  var $file = glob("/uploads/".$row["Image"]); 
  if (count($file) > 0) {
    echo "<td width='200' rowspan='3'><center><a href='/uploads/".$row["Image"]."' target='_blank'><div class='image-cropper'><div class='rounded' style='background-image:url(\"/uploads/".$row["Image"]."\")'>";
  } else {
    echo "<td width='200' rowspan='3'><center><a><div class='image-cropper'><div class='rounded' style='background-image:url(\"/images/no-image.jpg\")'";
  }
} else {
  echo "<td width='200' rowspan='3'><center><a><div class='image-cropper'><div class='rounded' style='background-image:url(\"/images/no-image.jpg\")'";
}

PHP Documentation - Glob

Image Placeholder for Broken Image Link?

2 Answers2