在Php页面中显示数据库中的图像

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']
    )
);

Answer 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.