CODEWITHSUNDEEP
phpimage
Milks
Milks

Reputation: 47

PHP page, it sees the pictures in the directory but showing a broken link

I am having an issue with PHP. I have to replace the existing HTML with PHP and I need it to dynamically load the picture from the images folder onto the PHP site on the web browser, but when I load the PHP page it will seem to show how the pictures are supposed to display, but it just has the symbol for broken picture in place of the picture

This is my try now:

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col">
            <h1 class="jumbotron text-center">Image Gallery</h1>
            <hr>
            <div class="row mb-3">
            
            
               
              <?php
                $images = scandir('images');
                $divName='col-md-4 my-auto';
                $address = 'images';
                $imgClassName = 'img-fluid img-thumbnail';
                unset($images[0]);
                unset($images[1]);
                foreach ($images as $image) {
                echo "<div class =$divName><img src =$address class=$imgClassName></div>";
                }
                   
            ?>

This is the original HTML Code:

<div class="row mb-3">
 <div class="col-md-4 my-auto">
                    <img src="images/vino-li-ckeSiSWsKaE-unsplash.jpg" class="img-fluid img-thumbnail">
                </div>
                <div class="col-md-4 my-auto">
                    <img src="images/samuel-girven-omzAJZ0ACqo-unsplash.jpg" class="img-fluid img-thumbnail">
                </div>
                <div class="col-md-4 my-auto">
                    <img src="images/billow-926-G79wOy3hTok-unsplash.jpg" class="img-fluid img-thumbnail">
                </div>
                <div class="col-md-4 my-auto">
                    <img src="images/pat-whelen-HOWfdzh1Q0g-unsplash.jpg" class="img-fluid img-thumbnail">
                </div>
                <div class="col-md-4 my-auto">
                    <img src="images/nick-fewings-8_VWBXsveQE-unsplash.jpg" class="img-fluid img-thumbnail">
                </div>
                <div class="col-md-4 my-auto">
                    <img src="images/tetiana-bykovets-I-T54pyFujk-unsplash.jpg" class="img-fluid img-thumbnail">


               </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 34

Answers (1)

hppycoder
hppycoder

Reputation: 1026

I would move this into a sprintf where you can see what the look will be and the variables that are passed into it.

$images = scandir('images');
$divName = 'col-md-4 my-auto';
$address = 'images';
$imgClassName = 'img-fluid img-thumbnail';
unset($images[0]);
unset($images[1]);
foreach ($images as $image) {
    echo sprintf("<div class='%s'><img src='%s' class='%s' /></div>",
        $divName,
        $address . '/' . $image,
        $imgClassName
    );
}

This answer is predicated on that scandir is functioning properly. $address in your original seemed to not include the image in there. I've attempted to guess at what your setup looks like.

Upvotes: 1

Related Questions