有没有办法自动使用另一个图像作为站点范围内丢失图像的临时占位符？答案

【问题标题】：Is there a way to automatically use another image as a temporary placeholder for missing images sitewide?有没有办法自动使用另一个图像作为站点范围内丢失图像的临时占位符？
【发布时间】：2020-02-19 00:11:34
【问题描述】：

我正在建立一个网站，但现在它有几张图片，我还没有实际的图片。由于这个站点有成千上万的图像或图像应该存在的地方，我不想手动更改每个图像，然后在找到正确的图像时再次更改它们。有没有办法创建一个函数来查找丢失的图像并用指定的图像替换它们，直到找到正确的图像？

更新：由于我仍然对放置此功能的位置感到有些困惑，因此我将为我需要此功能的其中一个页面添加代码，然后也许有人可以帮助我弄清楚如何放置它.

这是其中一页的代码：

<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>

<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>

<body>

<div class="wrapper">
    <a id="top"></a>
    <?php require_once('header.php'); ?>
    <?php require_once('nav.php'); ?>
    <div class="category"><h2>Flower Trees</h2></div>           
    <div class="display">
      <?php do { ?>
      <ul>
          <li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>
          <br />
          <span class="name"><?php echo $row_master['name']; ?></span></a></li>
      </ul>
      <?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
    <!-- end .display --></div>
    <?php
    mysqli_free_result($master);
    ?>
    <?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</body>
</html>

【问题讨论】：

你有一个错误。 mysqli_error() 需要一个参数。请考虑打开错误模式。 How to get the error message in MySQLi?

标签： php image placeholder

【解决方案1】：

由于这就像 foreach 循环一样简单，而不是分散在您的网页上的大量图片，您可以使用类似的东西：

$image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';

完整代码：

<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>

<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>

<body>

<div class="wrapper">
    <a id="top"></a>
    <?php require_once('header.php'); ?>
    <?php require_once('nav.php'); ?>
    <div class="category"><h2>Flower Trees</h2></div>           
    <div class="display">
      <?php do { 
          $image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';
      ?>
      <ul>
          <li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="<?php echo $image; ?>"/>
          <br />
          <span class="name"><?php echo $row_master['name']; ?></span></a></li>
      </ul>
      <?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
    <!-- end .display --></div>
    <?php
    mysqli_free_result($master);
    ?>
    <?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</body>
</html>

【讨论】：

为了安全起见，我实际上是在单独保存我的代码后复制了您的代码并将其放在我的位置。这段代码没有改变任何东西。
确实如此。你只需要为placeholder.png创建一个镜像文件
我将名称 placeholder.png 更改为我的 no_image.png 图像，但它仍然没有改变任何内容。
由于你是直接复制粘贴的，你可能没有注意到代码中的placeholder.png不是存储到img/而是在父文件夹中
是的，在将 img/ 添加到 no_image.png 后，它就可以工作了。泰。

【解决方案2】：

我不想手动更改它们中的每一个，然后在找到正确的图像时再次更改它们。有没有办法创建一个函数来查找丢失的图像并用指定的图像替换它们，直到找到正确的图像？

这样的函数可以写成：

function im($imgName) {
    $pathToImgs = "images/";
    if (file_exists( $pathToImgs . $imgName )) {
        echo $pathToImgs . $imgName;
    }
    else {
        echo $pathToImgs . "placeholder.jpg";
    }
}

然后在你的html中：

<img src="<?php im("product1.jpg"); ?>">
<img src="<?php im("product2.jpg"); ?>">
<img src="<?php im("product3.jpg"); ?>">

作为开始。

***编辑1：

给定你的代码：

<img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>

如果目标图像根本不存在，您可以使用插入占位符图像的条件对其进行修改。

<img class="thumb" src="<?php 

    if (file_exists("img/" . $row_master['img'])) {
        echo "img/" . $row_master['img'];
    }
    else {
        echo 'img/placeholder.jpg';
    }

?>">

您可以通过将条件转换为 php 函数来重用此功能，如上文所述。

【讨论】：

【解决方案3】：

使用 jQuery，您可以在发生错误时使用全局 $('img') 处理程序轻松完成一些事情。之后只需将它们与您的占位符图像交换即可。

$('img').on('error', function() {
  const oldSrc = encodeURIComponent($(this).attr('src'));
  $(this).attr('src', `https://via.placeholder.com/300/000000/FFFFFF/?text=${oldSrc}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="imagethatdoesntexist.jpg"><br />
<img src="anotherimage.jpg">

这里我使用placeholder.com（一个方便的站点，用于放置诸如此类的占位符图像），并将旧的图像源注入到查询字符串中，该站点将在图像本身中呈现。

【讨论】：

是否必须在网站上的每张图片上添加这些内容？我说的是一个拥有数千张图片的网站。
就像我说的：这是一个全局脚本。将其添加到页面一次，然后选择所有 $('img') 标记。
网站有数千张图片或将有数千张图片？另外，您目前在页面上获取图像的方法是什么？手动或自动，例如遍历已知文件名的图像数组？还是其他方法？
@Getset，正在从数据库中调用图像。这些表格包含数千张图片的潜在链接，但许多实际图片还没有。
@GetSet 它只是为页面上呈现的每个<img /> 触发该函数。当它出错时，这个函数被触发，并用一个占位符图像替换源。