Fetching images from the server for a social media post - php

Question

I am building a basic social media site for a university project and I am at the stage of displaying posts. Currently the posts display using a foreach which creates a series of div tags containing the information about each post from the db. I am now looking to add the images uploaded with these posts onto the page but I am not sure how to go about fetching them.
When the images are uploaded they are placed in a folder in the server called postImages, and are renamed to fit this format:
postID + image number
where image number is determined by how many images the user uploads, starting at 0.
My initial idea was to use scandir() to list all posts and explode their names to fetch the ID but this is much more complex than it had to be as there is another table in the DB called postImages which contains an ID for each post as well as the postID of the post it belongs to, so fetching which images are needed is no problem. However, I am not sure how to go from having the required IDs to actually fetching the image from the folder.
The current code for building the posts:
include 'config.php';
$postsSQL = "SELECT * FROM Post ORDER BY postTime DESC" ;
$result = mysqli_query($connection, $postsSQL);
foreach ($result as $row) {
echo "<div class = 'postContainer' id =".$row['postID'].">";
echo "<div id = 'postTitle' class = 'postTitle'>". "Post Title: ".$row['postTitle']. "</div>";
echo "<div id = 'postDesc' class = 'postDesc'>" . "Post Description: ".$row['postDescription']. "</div>";
echo "<div id = 'postLocation' class = 'postLocation'>" . "Post Location: ".$row['postLocation']. "</div>";
echo "<div id = 'postTime' class = 'postTime'>" . "Posted at: ".$row['postTime']. "</div>";
echo "<div id = 'UserID' class = 'userID'>".$row['UserID']. "</div>";
echo "</div>";
echo "<br>";
}
Thanks for taking a look, and sorry in advance if I've missed any details or this is a simple question.

Answer 1

Serve those images to users as static objects, not directly from PHP.
The first thing you do is make sure your images can be viewed in browsers. In other words, you should be able to use a URL something like
https://oddity.example.edu/uploads/postImages/72_0.png
You need to make that /uploads folder (or what ever you name it) visible to your system's web server.
Next, store the "slug" -- the partial URL -- for your image in your database. For the example above you might store 72_0.png.
Then, when writing out the HTML for your post page, include a tag like this:
<img src="https://oddity.example.edu/uploads/postImages/72_0.png" />
and the browser will retrieve and show the image.
You might be able to use PHP code like this to do that.
$imageRoot = 'https://oddity.example.edu/uploads/postImages/";
...
$imageurl = $imageRoot . $row['imageslug'];
echo '<img class="image" src="$imageurl" />;
Finally, people who store uploaded images for later viewing often use random hard-to-guess filenames for them to slow down web-scraping cybercreeps. That means assigning random file names upon uploads rather than using the naming scheme you mentioned.
Pro tip: avoid mixed-case table, column, and object names. Various file systems (including Windows's NTFS) do various different things with case-sensitivity, and you don't want to see your stuff stop working if you put in on a new server.