изображения не определены, foreach img в каталоге, запустите функцию js

Question

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

У меня есть, возможно, очень неэффективный код:

<script> 
function addRow(imgURL) {


  const carddiv = document.createElement('carddiv');

  carddiv.className = 'card';
  carddiv.style = "width: 18rem;"

  carddiv.innerHTML = `
  <img src="`+ imgURL +`" class="card-img-top home-card-image-restrict" alt="...">
  <div class="card-body">
    <h5 style="text-align: center;" class="card-title">Marli</h5>
<button type="button" class="btn btn-secondary btn-lg btn-block">See Gallery</button>
</div>
</div>
  `;

  document.getElementById('displayCards').appendChild(carddiv);

}


 </script> 

<?php
$files = scandir('images/Marli');
foreach($files as $file) {



echo $file, "<br>";
echo '<script type="text/javascript">addRow(', $file, ');</script>'; 

}
?>

Когда я запускаю его, я просто получаю сообщение об ошибке в консоли для каждого изображения, говорящее "не определено"

Я пытался получить это работает в течение нескольких часов, так что я действительно могу сделать это с некоторой помощью. Обратите внимание, я впервые использую код php.

Спасибо!

Answer 1

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

<?php
        $directoryName = 'images/Marli';
        $files = scandir($directoryName);

        foreach ($files as $file) {
            echo '<script type="text/javascript">addRow("/', $directoryName, '/', $file, '");</script>';
        }
    ?>