Cannot display images from database

[Julesss]

I am trying to display image from database, but the image does not upload on the website. I have the following code for the form I use to upload images (products) to database: 

<div class="pageWrapper">
    <div class="formContainer">

        <form class="insertForm" action="insert_product.php" method="post" enctype="multipart/form-data">
            <table align="center" width="100%">
                <tr align="center">
                    <div class="formHeading"><br><i class="fa fa-upload"></i><br>
                        <h1>Insert New Product</h1>
                    </div>
                </tr>
                <tr align="left">
                    <td align="right">Product Title:</td>
                    <td><input class="formInput" type="text" name="product_title" size="40" required /></td>
                </tr>

                <tr>
                    <td align="right">Product Category:</td>
                    <td><select class="formInput" name="product_cat" class="selectCategory">
                            <option class="formOption">Select a Category</option>
                            <?php
                    $get_cats ="select * from categories";
                    $run_cats = mysqli_query($con, $get_cats);
                    while ($row_cats = mysqli_fetch_array($run_cats)) {
                      $cat_id = $row_cats['cat_id'];
                      $cat_title = $row_cats['cat_title'];
                      echo "<option class='formOption' value='$cat_id'>$cat_title - Women </option>";
                      }
                      $get_catsMen = "select * from categoriesmen";
                      $run_catsMen = mysqli_query($con, $get_catsMen);
                      while ($row_catsMen = mysqli_fetch_array($run_catsMen)) {
                        $catMen_id = $row_catsMen['catMen_id'];
                        $catMen_title = $row_catsMen['catMen_title'];
                        echo "<option class='formOption' value='$catMen_id'>$catMen_title - Men </option>";
                      }
                      $get_accessories = "select * from categoryaccessories";
                      $run_accessories = mysqli_query($con, $get_accessories);
                      while ($row_accessories = mysqli_fetch_array($run_accessories)) {
                        $catAccessories_id = $row_accessories['catAccessories_id'];
                        $catAccessories_title = $row_accessories['catAccessories_title'];
                        echo "<option class='formOption' value='$catAccessories_id'>$catAccessories_title </option>";
                      }
                      $get_souvenirs = "select * from categorysouvenirs";
                      $run_souvenirs = mysqli_query($con, $get_souvenirs);
                      while ($row_souvenirs = mysqli_fetch_array($run_souvenirs)) {
                        $catSouvenirs_id = $row_souvenirs['catSouvenirs_id'];
                        $catSouvenirs_title = $row_souvenirs['catSouvenirs_title'];
                        echo "<option class='formOption' value='$catSouvenirs_id'>$catSouvenirs_title </option>";
                      }
                  ?>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">Product Image:</td>
                    <td><input type="file" name="product_image"/></td>
                </tr>

                <tr>
                    <td align="right">Product Price: </td>
                    <td><input class="formInput" type="text" name="product_price" required /></td>
                </tr>

                <tr>
                    <td align="right">Product Description:</td>
                    <td><textarea class="formInput" name="product_description" cols="20" rows="10"></textarea></td>
                </tr>

                <tr>
                    <td align="right">Product Keywords: </td>
                    <td><input class="formInput" type="text" name="product_keywords" required /></td>
                </tr>

                <tr align="center">
                    <td colspan="7"><input class="submitProduct" type="submit" name="insert_post"
                            value="Insert Product" /></td>
                </tr>
            </table>
        </form>
    </div>
    

</div>

</body>
</html>


<?php
  if(isset($_POST['insert_post'])){
    $product_title = $_POST['product_title'];
    $product_cat = $_POST['product_cat'];
    $product_price = $_POST['product_price'];
    $product_desc = trim(mysqli_real_escape_string($con, $_POST['product_description']));
    $product_keywords = $_POST['product_keywords'];

  //Getting the image from the field
    $product_image = $_FILES['product_image'] ['name'];
    $product_image_tmp = $_FILES['product_image'] ['tmp_name'];

    move_uploaded_file($product_image_tmp,"imgs/uploaded/$product_image");
    $insert_product = "insert into products (product_cat, product_title, product_price, product_desc, product_image, product_keywords) VALUES('$product_cat', '$product_title','$product_price','$product_desc', ' $product_image', '$product_keywords')";
  
    $insert_pro = mysqli_query($con, $insert_product);
    if ($insert_pro) {
      
      echo "<script>alert('Product Has Been inserted successfuly!')</script>";
      
    }
  }

?>

And the following code is the one I use for displaying the products on the page. All I get is the text 'no image to display'. I have the title and the price of the product, but no image. Could you please help me in solving this problem?

<div id="content_area">
        <div id="products_box">
            <?php
                $get_pro = " select * from products order by RAND() LIMIT 0,6";
                $run_pro = mysqli_query($con, $get_pro);

                while($row_pro = mysqli_fetch_array($run_pro)){
                    $pro_id = $row_pro['product_id'];
                    $pro_cat = $row_pro['product_cat'];
                    $pro_title = $row_pro['product_title'];
                    $pro_price = $row_pro['product_price'];
                    $pro_image = $row_pro['product_image'];

                    echo "
                    <div id ='single_product'>
                        <h3>$pro_title</h3>
                        <img src='imgs/uploaded/$pro_image' width='180' height='180' alt='no image to display'/>
                        <p><b> Price: $pro_price €</b></p>
                        <a href='details.php?pro_id=$pro_id'> Details</a>
                    </div>
                    ";
                }
            ?>
        </div>
    </div>

 

[Barand]

41 minutes ago, Julesss said:

VALUES('$product_cat', '$product_title','$product_price','$product_desc', ' $product_image', '$product_keywords')

It looks like you are inserting a space at the start of your image name.

Use prepared statements.

Edited June 17, 2021 by Barand

[Julesss]

I removed the space, but it is still not working. 

How do I use prepared statemets?

[Barand]

Example

// Put placeholders in the query instead of values
$stmt = $con->prepare("INSERT INTO user (username, firstname, lastname) 
                       VALUES (?, ?, ?)
                       ");
// Bind the value parameter to the placeholders
$stmt->bind_param('sss', $username, $fname, $lname);

// Execute the query
$stmt->execute();

https://www.php.net/manual/en/mysqli.prepare.php

[mac_gyver]

when you examine the data in the database table, are there any values in the product_image column? your php code is lacking in error handling that would tell you if and why the upload is failing.

43 minutes ago, Julesss said:

How do I use prepared statemets?

there is information in the php.net document and posted all over the web on how to use prepared queries. you should however switch to the much simpler and more consistent PDO extension. your insert query would look like the following if using the PDO extension -

$sql = "INSERT INTO products
	(product_cat, product_title, product_price, product_desc, product_image, product_keywords) VALUES
	(?,?,?,?,?,?)";

$stmt = $pdo->prepare($sql);
$stmt->execute([
	$product_cat,
	$product_title,
	$product_price,
	$product_desc,
	$product_image,
	$product_keywords
	]);

 

Edited June 17, 2021 by mac_gyver

[Julesss]

7 minutes ago, mac_gyver said:

when you examine the data in the database table, are there any values in the product_image column?

Yes, the image is being uploaded on the database but does not display on the website.

[Julesss]

18 minutes ago, Barand said:

// Put placeholders in the query instead of values $stmt = $con->prepare("INSERT INTO user (username, firstname, lastname) VALUES (?, ?, ?) "); // Bind the value parameter to the placeholders $stmt->bind_param('sss', $username, $fname, $lname); // Execute the query $stmt->execute();

I tried this, but it is still not working. The images are not being displayed on the website.

[mac_gyver]

40 minutes ago, Julesss said:

I tried this, but it is still not working

the main point of using a prepared query is to prevent sql special characters in the data values from breaking the sql query syntax, which will prevent the insert query from working.

3 hours ago, Julesss said:

imgs/uploaded/

when you examine the contents of the imgs/uploaded/ folder, does it contain the files you have been uploading? again, the code is lacking in error handling that would let you know if and why it is failing.

what does the 'view source' of the output with the <img ... tag show?