Есть ли способ автоматически использовать другое изображение в качестве временного заполнителя для отсутствующих изображений по всему миру? - PullRequest
Новая
       11

Есть ли способ автоматически использовать другое изображение в качестве временного заполнителя для отсутствующих изображений по всему миру?

0 голосов
/ 22 октября 2019

Я работаю над созданием сайта, но сейчас у него есть несколько изображений, для которых у меня пока нет реальных изображений. Поскольку на этом сайте тысячи изображений или мест, где изображения должны быть, я не хочу вручную менять каждое из них, а затем менять их снова, когда я найду правильное изображение. Есть ли способ создать функцию, которая будет искать отсутствующие изображения и заменять их указанным изображением до тех пор, пока не будет найдено правильное изображение?

Обновление: поскольку я все еще немного запутался относительно того, где даже разместитьЭта функция, я собираюсь добавить код для одной из страниц, для которых мне это нужно, тогда, возможно, кто-то может помочь мне выяснить, как ее разместить.

Вот код для одной из страниц: 

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

Ответы [ 3 ]

1 голос
/ 22 октября 2019

Мне не нужно вручную менять каждый из них, а затем менять их снова, когда я найду правильное изображение. Есть ли способ создать функцию, которая будет искать отсутствующие изображения и заменять их указанным изображением, пока не будет найдено правильное изображение?

Такая функция может быть записана как: 

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, описанная выше как стартер.

1 голос
/ 22 октября 2019

Поскольку это просто цикл 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>
0 голосов
/ 22 октября 2019

Используя 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 (удобный сайт для таких изображений-заполнителей, как этот), и вставляю старый источник изображения в строку запроса, которую сайтбудет отображаться на самом изображении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...