Display image from database in Php page

Question

I try to make online quiz with images questions, and i need your help/advice. My images is stored on database where have an id "image". My upload works fine, image is stored on database...but i can't show image in questions.

I succeeded to show icon for image and name, but not image. Image is stored in database with base64_encode, and here is a structure from my database.

And the result from my code is here: http://imageshack.com/a/img922/6874/U4hkbj.jpg

I put name there to verify my connection to database, it's not necessary from final code.

And here is code for display images:

 require_once("scripts/connect_db.php");
    $res=mysqli_query($connection, "SELECT * FROM questions WHERE id='$question'");

            echo "<table>";
            while($row=mysqli_fetch_array($res)) {

                echo "<tr>";
                echo "<td>";?> <img src= data:image/png;base64 ' . $row['image']; .  '  > <?php echo "</td>";
                echo "<td>" ; echo $row["name"]; echo" </td>";

                echo "</tr>";

            }
            echo "</table>";

And that's my code from show questions with image:

   <?php 
   session_start();
   require_once("scripts/connect_db.php");
   $arrCount = "";
    if(isset($_GET['question'])){
$question = preg_replace('/[^0-9]/', "", $_GET['question']);
$output = "";
$answers = "";
$q = "";
$sql = mysqli_query($connection, "SELECT id FROM questions");
$numQuestions = mysqli_num_rows($sql);
if(!isset($_SESSION['answer_array']) || $_SESSION['answer_array'] < 1){
    $currQuestion = "1";
}else{
    $arrCount = count($_SESSION['answer_array']);
}
if($arrCount > $numQuestions){
    unset($_SESSION['answer_array']);
    header("location: index.php");
    exit();
}
if($arrCount >= $numQuestions){
    echo 'finished|<p>There are no more questions. Please enter your first and last name and click next</p>
            <form action="userAnswers.php" method="post">
            <input type="hidden" name="complete" value="true">
            <input type="text" name="username">
            <input type="submit" value="Finish">
            </form>';
    exit();
}


    require_once("scripts/connect_db.php");
    $res=mysqli_query($connection, "SELECT * FROM questions WHERE id='$question'");

            echo "<table>";
            while($row=mysqli_fetch_array($res)) {

                echo "<tr>";
                echo "<td>";?> <img src= data:image/png;base64 ' . $row['image']; .  '  > <?php echo "</td>";
                echo "<td>" ; echo $row["name"]; echo" </td>";

                echo "</tr>";

            }
            echo "</table>";




    $singleSQL = mysqli_query($connection, "SELECT * FROM questions WHERE id='$question' LIMIT 1");
                    while($row = mysqli_fetch_array($singleSQL)){
        $id = $row['id'];
        $thisQuestion = $row['question'];
        $type = $row['type'];
        $question_id = $row['question_id'];
        $q = '<h2>'.$thisQuestion.'</h2>';
        $sql2 = mysqli_query($connection, "SELECT * FROM answers WHERE question_id='$question' ORDER BY rand()");
        while($row2 = mysqli_fetch_array($sql2)){
            $answer = $row2['answer'];
            $correct = $row2['correct'];
            $answers .= '<label style="cursor:pointer;"><input type="radio" name="rads" value="'.$correct.'">'.$answer.'</label> 
            <input type="hidden" id="qid" value="'.$id.'" name="qid"><br /><br />
            ';

        }
        $output = ''.$q.','.$answers.',<span id="btnSpan"><button onclick="post_answer()">Submit</button></span>';
        echo $output;
       }
    }
?>

I'm new in php and that's my first project, i really need your help for solve my problem.

Thank you so much for help and for interest!

EDIT: The images is stored on database with this code:

if (isset($_FILES['image'])) {
$name = $_FILES['image']['tmp_name'];
$image = base64_encode(
    file_get_contents(
        $_FILES['image']['tmp_name']
    )
);

@FastSnail, firstly, thanks for comment. I replaced with <img src= base64_encode($row['image']) > , and unfortunately, same result. :( — Diaconu Eduard
– Diaconu Eduard, Commented May 1, 2016 at 14:32

fusion3k · Accepted Answer · 2016-05-02 17:13:18Z

1

You forgot wrapping quotes, comma and you don't echo $row['image']. Change:

<img src= data:image/png;base64 ' . $row['image']; .  '  >

to:

<img src="data:image/png;base64,<?= $row['image'] ?>"  >

or (coherently with your global syntax) to:

echo '<img src="data:image/png;base64,' . $row['image'] . '">';

Edit:

I see the pastebin in your last comment. First of all, I think it is not the HTML source, but it is the source from page inspector (after DOM rendering). If you look at the code, you can see that there is not any <img> tag. Your rendered code is:

<div id="answers">/9j/(...)/2Q=="&gt;<h2>
                  └────────────┘
                   base64 image

The base64 encoded image is correct (as you can see here), but it is not wrapped by correct <img> tag:

<img src="data:image/png;base64,/9j/(...)/2Q==">
                                └────────────┘
                                 base64 image

Seeing your code:

echo "<table>";
while($row=mysqli_fetch_array($res)) {
    echo '<img src="data:image/png;base64,' . $row['image'] . '">';
}
echo "</table>";

Even if <table><img></table> is not valid HTML, I think that the problem is not in your HTML, but it is in your javascript, probably inside the getQuestion() function: test it deeply to retrieve corrected code.

edited May 2, 2016 at 17:13

answered May 1, 2016 at 14:28

fusion3k

11.7k4 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Diaconu Eduard Over a year ago

Thank you so much for help. With few days ago, i tried something like that, but i don't understand what my result is a string:imageshack.com/a/img923/2690/2AZKay.jpg Maybe, is a problem with my upload format, right? Thank again for help! :)

Diaconu Eduard Over a year ago

My code, display a string (base64 probably). I think now i need a function to decode base64. The printscreen with result, is uploaded here: imagizer.imageshack.us/a/img923/2690/2AZKay.jpg . Curious is why the button to submit isn't displayed :)). Thank you for taking the time to answer my question! :)

fusion3k Over a year ago

If you want output a base64 data img, you don't have to decode it. First, check this url: if you see a red dot, your browser can read data:image; so, the issue probably is in your original encoding. How you encode original images?

Diaconu Eduard Over a year ago

i don't know how can thank you for help... i edited my original post with the code for upload (it's more easy to read). Is maybe a problem there?

fusion3k Over a year ago

I can not reproduce your issue: it works fine for me. Can you paste your html source (do not use inspector, use “view source”) in pastebin?

|

Collectives™ on Stack Overflow

Display image from database in Php page

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related