当前位置: 首页 > 知识库问答 >
问题:

破碎图像链接的图像占位符?

姚棋
2023-03-14

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

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

目前,我使用了一个IF语句,将占位符图像放置在列“image\u 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\")'";
                }

但是,我的方法不适用于错误的链接(原始图像已被删除,或者由于某种原因,链接错误)它只是显示为空白,我可以理解为什么,因为$行[“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!

共有2个答案

鄢子平
2023-03-14

您可以使用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
姜兴业
2023-03-14

在勉强使用glob之后,我设法使用file\u 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"])) {    

谢谢大家的帮助!:)

 类似资料:
  • 在本章中,我们将了解Grav中的图像链接。 Grav允许您将图像从一个页面链接到另一个页面,甚至链接到远程页面。 如果您使用HTML链接文件,那么在Grav中很容易理解图像链接。 使用此结构,我们将了解如何使用不同类型的链接在页面中显示媒体文件。 此结构下的每个文件夹都包含图像,并且/02.green/img01下有一个特殊目录,它充当页面但仅包含媒体文件。 让我们看一下基于Grav markdo

  • 我们已经了解了如何使用文本创建超文本链接,我们还学习了如何在我们的网页中使用图像。 现在,我们将学习如何使用图像来创建超链接。 例子 (Example) 将图像用作超链接很简单。 我们只需要在文本位置的超链接内使用图像,如下所示 - <!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </

  • 问题内容: 这个想法是在下载真正的高分辨率图像之前显示图像的低分辨率版本,最好使用img标签。 低分辨率图像将首先显示,下载后将替换为高分辨率图像。如何才能做到这一点?是否可以编辑img.src属性,还是应该创建其他内容(例如具有背景的包装div或另一个临时div)? 问题答案: 您可能想要创建一个指令,实际上我将把hires作为属性,因此默认情况下它以绝杀开头。 JS: HTML:

  • 我正在尝试使用Glide在Listview中加载一些图像。如果加载图像时未使用占位符,则图像将正确加载。然而,当我试图设置占位符时,我正在通过网络加载的图像似乎被拉伸了。这仅在使用占位符图像的情况下发生。如果我离开屏幕并返回(因此没有加载占位符图像),则图像会正确显示。 这是我的简单Glide实现:

  • 这起作用了,但有一个48x48的正方形,里面什么也没有,因为没有图像源。我试着用CSS把边框改成0像素,并把它的颜色改成白色,但它不起作用,方块保持不变。 然后我尝试使用break标记,但它们的问题是我不能有一个精确的48x48的空白。 如何在页面中插入固定大小的空白? 我将把空格放在div中,然后使用。innerhtml更改div标记之间的代码,将空格替换为图像。

  • 我正在处理位图图像的透明部分用洋红色着色(在一些语言中,可以将颜色设置为透明)。我试图在原始位图图像中透明洋红色的像素。 我从SD卡加载位图: 将其复制到另一个位图以使其可变: 然后逐像素扫描,找到洋红色的像素,并尝试改变它们的透明度。 但是那些我希望变成透明的像素被转换成黑色。通过更改alpha,我发现最终颜色从中提到的颜色(不提及alpha)变为黑色。例如,变为白色,为灰色,而变黑。 我不知道