按顺序加载目录中的图像,加载填充图像以取代缺失的图像


Load Images in Directory in Sequence, Loading a Filler Image in Place of Missing Images

所以我有一组20张图片,都标记为狗。所以dog01, dog02, dog03等等。我使用这段代码将它们从目录中拉出,并显示它们5到一行,在4行中,像这样。

dog01   dog02   dog03   dog04   dog05
dog06   dog07   dog08   dog09   dog10 (etc.)

我正在使用这段代码从一个目录中加载图像,它是按顺序加载的。

<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
if(($i+1)%5 == 0) echo '<br />';
}
?>

但是,我想看看是否有一种方法可以获得它,以便如果目录中缺少一个狗,它会在其位置加载一个填充符,并继续按顺序加载其他狗。因此,如果dog03丢失,它看起来像这样:

dog01   dog02   filler   dog04   dog05

它将显示填充符,并继续序列。我真的不确定我是否能在php中实现这一点。如果有人知道我需要采取什么方法,我会很感激。我应该注意到填充图像位于另一个名为"filler/"的目录中。

我认为有两种方法可以解决这个问题。第一种方法是在php中不担心它,并将填充图像加载为背景图像。通常情况下,图像将加载到填充图像上,但如果图像未加载,则填充图像保持可见。

另一种方法是测试文件是否存在。

作为背景图像:

.deck {
  //whatever you had here
  background-image: url( "/filler/filler.png" );
}

你可能需要在你的图像周围做容器div,并把css放在上面。请注意,如果没有明确设置宽度或高度,这将无法工作,因为背景图像不会为它所附加的元素分配任何宽度或高度。

通过事先测试:

<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
  if( file_exists( $image ) ) {
    $title = pathinfo($image);
    echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
  } else {
    echo '<img class="deck filler" src="/filler/filler.png" alt="This image does not exist." title="This image does not exist.">';
  }
  if(($i+1)%5 == 0) echo '<br />';
}
?>

如果你在安全模式下运行php,这个方法可能不起作用。