损坏的图像链接的图像占位符？答案

【问题标题】：Image Placeholder for Broken Image Link?损坏的图像链接的图像占位符？
【发布时间】：2016-01-18 18:28:58
【问题描述】：

目前用户可以将图片上传到我的网站，图片的位置存储在 MySQL 表中。

当我使用 SELECT 函数调用图像时，它们是通过 CSS 样式加载的 background-image:url('image.jpg')

目前我使用了一个 IF 语句，它将一个占位符图像放置在任何将“Image_URL”列设置为 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\")'";
                }

但是，我的方法不适用于错误链接（原始图像已被删除，或者由于某种原因链接错误。）它只是显示空白，我可以看到原因，因为 $row["Image"] != NULL，那里有一个链接，只是没有链接到图像。

当在提供的链接中找不到图像时，有没有办法加载我的占位符图像 no-image.jpg？

我的 DIV 只是为了使我的图像成为圆形并居中，所以我将它们发布在这里以防万一，您可以帮助我调整这些类以添加占位符功能。

.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;
}

图像裁剪器和圆角DIV实际上来自这个网站，所以感谢Hiral！

【问题讨论】：

你能说出你的照片是什么格式的吗？它们都是“jpg”吗？或者它们可以不同？
嗨新浪，它们可以不同，我将上传表单设置为只允许 JPG、GIF 和 PNG 文件。

标签： php html css image placeholder

【解决方案1】：

在努力使用glob 之后，我设法使用file_exists 让它工作。

但感谢 Stewartside 让我走上了正确的道路，并构建了由此产生的 if 声明。

这是现在的代码：

$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";
}

我认为以下方法也可以：

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

感谢大家的帮助！ :)

【讨论】：

【解决方案2】：

您可以使用glob() 函数来确定文件是否存在。

类似的东西：

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

【讨论】：