有没有一种方法可以自动使用另一个图像作为临时占位符以在整个站点范围内丢失图像？

Question

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

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

这是其中一个页面的代码：

<?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>

Answer 1

使用 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（一个方便的占位符图像网站），并将旧图像源注入查询字符串，该网站将在图像本身中呈现。

Answer 2

I don't want to have to manually change each of them and then change them again when I find the correct image. Is there a way to create a function that will look for the missing images and replace them with a specified image until the correct image is found?

这样的函数可以写成：

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 函数来重用此功能，如上文所述。

Answer 3

因为这就像一个 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>

有没有一种方法可以自动使用另一个图像作为临时占位符以在整个站点范围内丢失图像？

Is there a way to automatically use another image as a temporary placeholder for missing images sitewide?

php

image

placeholder