PHP+JS图片渲染问题：loadimages.php无法显示图片

Let's figure out why your images aren't loading from loadimages.php—I've run into similar path/session issues before, so let's break this down step by step:

1. Fix Session Initialization First #

You’re using $_SESSION['seldir'] in loadimages.php, but if the file doesn’t explicitly start the session, that variable will be empty. This breaks your dynamic directory path entirely.

Add this line at the very top of loadimages.php (before any output, including whitespace or HTML):

session_start();

This ensures the session data is accessible when the script runs.

2. Fix Relative Path Confusion #

This is the most common culprit here. When you run code in index.php, relative paths are based on the root directory of your site. But if loadimages.php lives in a subfolder (e.g., /scripts/loadimages.php), those same relative paths will point to the wrong location.

Two Fixes for Paths: #

Option 1: Use Root-Relative Paths

Prefix all paths with a / to anchor them to your site’s root directory, regardless of where loadimages.php is located:

// For your dynamic path:
$tarDir = "/kennels/" . $selectedDir . "/" . $match;

// For your hardcoded test:
$files = glob("/kennels/projects/images/*.jpg");

Option 2: Use Server Document Root

Build absolute paths for server-side file operations, and root-relative paths for browser-facing image sources:

session_start();
$selectedDir = $_SESSION['seldir'];
$match = $_POST['match'];

// Server-side path for scandir (absolute)
$serverTarDir = $_SERVER['DOCUMENT_ROOT'] . "/kennels/" . $selectedDir . "/" . $match;
// Browser-facing path for img src (root-relative)
$browserTarDir = "/kennels/" . $selectedDir . "/" . $match;

$my_image_array = scandir($serverTarDir);
$img_string = "";
foreach($my_image_array as $img_name){
    if(strlen($img_name) > 2 ) {
        $imgname = $browserTarDir . "/" . $img_name;
        $img_string .= '<img src = "' .$imgname. '">';
    }
}
echo $img_string;

3. Verify the AJAX Response #

To confirm what’s actually being returned to your JS:

1. Open your browser’s dev tools (F12) and go to the Network tab
2. Click one of your matchList links to trigger the AJAX call
3. Find the loadimages.php request, then check the Response tab

Look at the <img> tags being sent back—if their src paths are wrong (e.g., missing a /, or including an extra folder), you’ll know exactly where to adjust your code.

4. Check File Permissions #

Make sure your web server user (e.g., www-data on Linux) can read the kennels/ directory and its contents:

• Set directory permissions to 755
• Set image file permissions to 644

On Linux, you can run these commands in your site’s root:

chmod -R 755 kennels/
chmod -R 644 kennels/*

Avoid using 777—it’s a major security risk.

5. What About Your JS Line? #

Your $("#imageload").html(output).show(); code is fine! The problem isn’t with inserting the HTML—it’s with the HTML content loadimages.php is returning (invalid paths, missing images, etc.). To confirm, try directly accessing loadimages.php in your browser (manually add a match parameter and ensure your session has seldir set). If images don’t load there, the issue is definitely in the PHP code, not the JS.

Quick Debug Test #

To isolate the problem, create a minimal version of loadimages.php:

<?php
session_start();
// Use a known valid image path here
echo '<img src="/kennels/projects/images/your-test-image.jpg">';
?>

If this loads via AJAX, your path and permissions are good—then you can reintroduce your dynamic logic step by step.

内容的提问来源于stack exchange，提问作者popeye