Display images from Database

[Revolutsio]

My problem is i have a small database with the following headers.

file_name, uploaded_on & Game.

I have a small little upload image code and then i add the name of the game with phpMyAdmin for now..

and the following code will display the images and name of the game. but as you can see i only can get the name of the game to appear.

<div class="card-body p-2">
                        <div class="row">
                        <div class="col-4 text-center p-3 align-self-top">
                        <?php $game="SELECT file_name, Game FROM images WHERE id='1'"; ?>
                            <img class="w-100 mb-2 bg-dark" src="images/1.png">                            
                        <?php foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>                            
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/2.png">
                            <?php $game="SELECT Game FROM images WHERE id='2'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>

What I would like help with is how do i get the image from the database to show within the div statements.

 

 

[ginerjm]

Is 'file_name' the name of the image? I am not really sure at all what you are trying to do.  All those divs!  And 2 queries.  Why 2?

And all the in-and-out of php mode.  Why?

Do you php at the top.  Get the query results.  Then begin your div(s) and loop thru the query results and output the image tag that you need.  I am guessing that your two queries are to get two specific images - one for id of 1 and one for id of 2.

 

Edited March 22, 2022 by ginerjm

[Revolutsio]

16 minutes ago, ginerjm said:

Is 'file_name' the name of the image? I am not really sure at all what you are trying to do.  All those divs!  And 2 queries.  Why 2?

And all the in-and-out of php mode.  Why?

Do you php at the top.  Get the query results.  Then begin your div(s) and loop thru the query results and output the image tag that you need.  I am guessing that your two queries are to get two specific images - one for id of 1 and one for id of 2.

 

What i am trying do is have images side by side in id order and underneath the name of the image.

 

Yes the image is called file_name

[ginerjm]

So - as I said - do your php code at the beginning of this code. Then begin the loop

$game = "SELECT file_name, Game FROM images 
		where 1 
		order by id";
$qresults = $db->query($game);
while ($row = $qresults->fetch())
{
	echo "
		<div class='card-body p-2'>
		<img class='w-100 mb-2 bg-dark' src=\"{$row['file_name']}\">
		<center>{$row['Game']}<center>
        </div>";
          
}

The div can be setup with a width and a float to position them as wide as your body is and then they will wrap.

[ginerjm]

Try adding 'object-fit:contain' to your css to help the img stay inside your div dimensions.

[Revolutsio]

Thank you for you help...

I am getting an error on the fetch query

'Uncaught Error: Call to undefined method mysqli_result::fetch()'

 

ignore the above i used fetch_assoc and it works thank you again

 

Edited March 22, 2022 by Revolutsio
found a work through

[ginerjm]

That means your query failed.  output the error message that comes from the query call.

Sorry - that was partly my fault.  I only use PDO, not mysqli and so my function name was incorrect.

BTW  pdo is a much better interface.  If you are a noob I strongly suggest learning pdo instead of mysqli

Edited March 22, 2022 by ginerjm

[Revolutsio]

would you like to see the config code or index code?

 

here is the error i get when i run the code

Quote

Fatal error: Uncaught Error: Call to undefined method mysqli_result::fetch() in G:\xampp\htdocs\Columns\Index.php:51 Stack trace: #0 {main} thrown in G:\xampp\htdocs\Columns\Index.php on line 51

 

Edited March 22, 2022 by Revolutsio

[ginerjm]

The code that is giving you the error!  The script that we have both been looking at.

[mac_gyver]

10 minutes ago, Revolutsio said:

undefined method mysqli_result::fetch(

it means that there is no fetch() method.

if you are going to use a while(){} loop, you would use the fetch_array() method.

if you are going to use a foreach(){} loop, you can directly iterate over the rows in the result set.

[ginerjm]

As I said --- it was my error putting a pdo---like call into his mysqli environment....

[Revolutsio]

1 minute ago, mac_gyver said:

it means that there is no fetch() method.

if you are going to use a while(){} loop, you would use the fetch_array() method.

if you are going to use a foreach(){} loop, you can directly iterate over the rows in the result set.

It works with fetch_array and fetch_assoc

[ginerjm]

Show us the code so we can both know what is going on.

[Revolutsio]

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="grid.css">
    <title></title>
</head>
<body>
    <?php
    include 'config.php';
    ?>
    <div class="container">
        <div class="row">
        <div class="col">
            <div class="card bg-dark mb-4">
                <div class="card-header text-center">
                    <h2 class="text-uppercase">Last Completed</h2>
                </div>
                    <div class="card-body p-2">
                        <figure>
                        <img class="w-100 text-center" src="images/1.png">
                        <figcaption class="py-2 px-3">
                            
                            <div class="figcaption-title">>observer_</div>
                            <div>2 December 2020</div>
                            
                            
                        </figcaption>
                        </figure>
                        
                    
                </div>
            </div>
        </div>
<!-- Middle Column --->
        <div class="col">
            <div class="card bg-dark mb-4">
                <div class="card-header text-center">
                    <h2 class="text-uppercase">Game Collection</h2>
                </div>
                <?php
               $game = "SELECT file_name, Game FROM images 
               where 1 
               order by id";
       $qresults = $db->query($game);
       while ($row = $qresults->fetch_array())
       {
        //    print_r($qresults);
           echo "
               <div class='card-body p-2'>
               <img class='w-100 mb-2 bg-dark' src=\"{$row['file_name']}\">
            
               </div>";
                 
       }

this is the index.php file

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName     = "gameslibrary";
// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

this is the config, do you want to see the stylesheet.

 

also i cannot get the images as i do not know how to use the src in the way you have done it

[ginerjm]

The config file is making the connection so that is not the problem.  Nor is a stylesheet giving you an error.

Your main line code is the problem.  What line is the error message pointing to?  The line that does the fetch still?

[Revolutsio]

4 minutes ago, ginerjm said:

The config file is making the connection so that is not the problem.  Nor is a stylesheet giving you an error.

Your main line code is the problem.  What line is the error message pointing to?  The line that does the fetch still?

Fatal error: Uncaught Error: Call to undefined method mysqli_result::fetch() in G:\xampp\htdocs\Columns\Index.php:51 Stack trace: #0 {main} thrown in G:\xampp\htdocs\Columns\Index.php on line 51

line 51 is the while statement

[ginerjm]

But that use of "fetch()' is invalid.  You've already been told that.

[dodgeitorelse3]

The where clause posted above in index.php looks wrong

[Revolutsio]

3 minutes ago, ginerjm said:

But that use of "fetch()' is invalid.  You've already been told that.

I did change it to 'fetch-array' & 'fetch_assoc' and it shows the Game field, it is not showing the png's from the database

[ginerjm]

Show us the NEW code and mark the error line

[Revolutsio]

6 minutes ago, dodgeitorelse3 said:

The where clause posted above in index.php looks wrong

Sorry iam new this, could you tell what is wrong with the where clause please

6 minutes ago, dodgeitorelse3 said:

The where clause posted above in index.php looks wrong

 

[ginerjm]

I can't until you SHOW it to me.  Please post the changed code so that I can see what you are running.  Not the index file, not the css or connection file -- just the part that is failing

[Revolutsio]

1 minute ago, ginerjm said:

Show us the NEW code and mark the error line

With the code i posted it i get the game field but no images appear see below

[ginerjm]

Since you are not cooperating with my requests to see the new code I have to retire.

 

Good luck not listening.

[Revolutsio]

But i have not changed the code apart from swapping the fetch clause to fetch-array as suggested above. the code i posted is the code that is in the screenshot, as you can see it is not showing the images,

this line is what i  want help on

<img class='w-100 mb-2 bg-dark' src=\"{$row['file_name']}\">

how do I show the images?

I am grateful for your help.