获取存储图像时，来自Raspberry Pi服务器的响应中断

Question

I have a Raspberry Pi server which has PNG images saved on it. I am trying to GET the images from the server and append them all to an HTML element. All of the relevant files (the images, HTML, JavaScript, and PHP) are all stored in /var/www/html .

File load.php :

<?php
$dirname = "/var/www/html/";
$images = glob($dirname."*.png");
$data = '<ul>';
foreach($images as $image) {
  $data .= '<li><img src="'.$image.'" /></li>'; // append all images
}
$data .= '</ul>';
echo $data;
?>

JavaScript function:

function loadImg(){
    $.ajax({
        type: "GET",
        url: "load.php",
        success: function(data){
            console.log(data); // To check something there
            $("#imgsDiv").html(data);
        }
    });
}

However, this functionality does not work and only displays the traditional broken image icon onto the 'imgsDiv'.

I really have no idea why it can't display the images from the server. It is not an issue with folder permissions as I am able to load single named images into img srcs.

This is the HTML when I inspect the page:

I also get a 404 error saying that the page can't find the resource: http://192.168.1.201/var/www/html/image.png , etc. for all of the listed images.

Answer 1

It Seems the PHP code was bugging out with me having declared the directory:

$dirname = "/var/www/html/";
$images = glob($dirname."*.png");

It should just be:

$images = glob("*.png");

And the PHP code looks in the correct directory for the images ans successfully displays them.