Is there a way to display images which are uploaded to MySQL through php?

Question

I am trying to display an image from MySQL to an HTML page but all I see is an icon or sometimes some characters. This is what I see. Shows icon which I see

I am using a form to upload the image to the database with some other input fields as well. My form looks like this.

<form method="post" action="http://localhost:63342/sqlvali-master111/publicRoot/sqlvali/index.php?action=lec_hub/pages">
                    <div class="form-group">
                        <label for="description" class="control-label">Description:</label>
                        <input type="text" class="form-control" id="description" name="description">
                    </div>
                    <div class="form-group">
                        <label for="external_link" class="control-label">External Link:</label>
                        <input type="text" class="form-control" id="external_link" name="external_link">
                    </div>
                    <div class="form-group">
                        <label for="query_structure" class="control-label">Query Structure:</label>
                        <input type="file" class="form-control" id="query_structure" name="query_structure">
                    </div>
                    <div class="form-group">
                        <label for="feedback" class="control-label">Feedback:</label>
                        <input type="text" class="form-control" id="feedback" name="feedback">
                    </div>
                    <div class="form-group">
                        <label for="likert" class="control-label">Likert-type Scale:</label>
                        <input type="text" class="form-control" id="likert" name="likert">
                    </div>
                    <div class="form-group">
                        <label for="query_example" class="control-label">Query Example:</label>
                        <input type="text" class="form-control" id="query_example" name="query_example">
                    </div>
                    <div class="form-group">
                        <!--                        <label for="lec_id_fk" class="control-label">Lecture Foreign Key:</label>-->
                        <input type="hidden" class="form-control" id="chapter_id_fk" name="chapter_id_fk" value="<?php echo $chapter_id?>">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input name = "add" type = "submit" id = "add" value = "Add">
                    </div>
                </form>

This is how I add the form data to my database in MySQL

<?php

$con = mysqli_connect("localhost", "root", "", "lectureHub");
if(isset($_POST['add'])) {
    $description = $_POST['description'];
    $external_link = $_POST['external_link'];
    $chapter_id_fk = $_POST['chapter_id_fk'];
    $query_structure = $_POST['query_structure'];
    $feedback = $_POST['feedback'];
    $likert = $_POST['likert'];
    $query_example = $_POST['query_example'];
    $sql = "INSERT INTO pages (description, external_link, chapter_id_fk, query_structure, feedback, likert, query_example) VALUES('$description','$external_link','$chapter_id_fk', '$query_structure', '$feedback', '$likert', '$query_example')";
//                        mysqli_select_db("lecturehub");
    $retval = mysqli_query($con, $sql);
    if(! $retval ) {
        die('Could not enter data: ' . mysqli_error());
    }
}

This is my current try to display the picture in HTML which renders me only the Icon.

<div class='col-md-8'>
                    <h3>query Structure</h3>
//                    <p>$query_structure</p>
                      <img src='data:image;base64,".base64_encode($row['query_structure'])."' alt='image' style='width: 100px; height: 100px'>        
                </div> 

Answer 1

Don't upload files to a database.
Store the files on the server, in a media folder for example of your web root. Then store the path to that image in your database.
It will make your database a lot more resilient and reduces the load on your server and the amount of RAM the server will need for caching.

Also, by storing it in the web root you can leverage browser caching and webserver quickly streaming a file, instead of loading it into ram from disc by the database engine, then passing it via network socket to php, then rendering it as a base64 image or a binary image, passing that to the webserver, who passes that to the client as a long binary stream.

When it's in the webroot you get a request from the client, and the webserver streams the files directly from disk/own cache to the client, who stores the file in their browser cache, lightening the load on your server on subsequent visits.