图像占位符为破碎的图像链接 - Image Placeholder for Broken Image Link?

Image Placeholder for Broken Image Link?

本文关键字：图像链接占位符破碎 | 更新日期: 2023-09-27

目前用户可以上传图片到我的网站，图片的位置存储在一个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!

在努力使用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"])) {

谢谢大家的帮助!:)

您可以使用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文档- Glob