0

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.

DB image

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']
    )
);
Diaconu Eduard
  • 161
  • 1
  • 3
  • 14

1 Answers1

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.

fusion3k
  • 11,568
  • 4
  • 25
  • 47
  • 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:http://imageshack.com/a/img923/2690/2AZKay.jpg Maybe, is a problem with my upload format, right? Thank again for help! :) – Diaconu Eduard May 01 '16 at 14:46
  • 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! :) – Diaconu Eduard May 01 '16 at 15:08
  • If you want output a base64 data img, you don't have to decode it. First, check this [url](https://jsfiddle.net/eren35fj/1/): 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? – fusion3k May 01 '16 at 15:19
  • 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? – Diaconu Eduard May 01 '16 at 15:56
  • 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](http://pastebin.com/)? – fusion3k May 01 '16 at 15:59
  • Sure i can...Look, i upload entire project on GitHub. Here is a link: https://github.com/diaconueduardstefan/Quiz-online-based-on-PHP . When fixed my errors, i will be edit original post with this link. I think maybe help other users...In "addQuestions" is code for upload and in "questions" is code for display. Thank you so much again! – Diaconu Eduard May 01 '16 at 16:17
  • With “html source” I mean the final page, not the php code. It is for understanding what is the output and if there are some wrong chars. – fusion3k May 01 '16 at 16:25
  • Oh sorry! I inserted in quiz.php the html code for getQuestion ( https://github.com/diaconueduardstefan/Quiz-online-based-on-PHP/blob/master/quiz.php ) and the html source is very simple html page for start quiz in index.php ( https://github.com/diaconueduardstefan/Quiz-online-based-on-PHP/blob/master/index.php ). I hope that's is the right answer for question. :) – Diaconu Eduard May 01 '16 at 16:36
  • I'm sorry, but without seeing HTML of final rendered page I can not imagine the issue. Probably it is something with original image encoding. – fusion3k May 01 '16 at 17:33
  • But, the final result is upload here: imagizer.imageshack.us/a/img923/2690/2AZKay.jpg (above the "test question", must be image...but is an code). The structure from database is here : imageshack.com/a/img923/9678/DTDcdr.jpg (image is in LongBlob format). Thank you so much for your interest! – Diaconu Eduard May 01 '16 at 19:29
  • I repeat: w/out seeing HTML source code of final rendered page I can not imagine the issue. As alternative, you can provide the link to your real page (if reachable). – fusion3k May 01 '16 at 20:31
  • Sorry again...i don't understand exactly what html source you refer. The project is on localhost, but i run my project and i copy html code in Pastebin. Here is the result: http://pastebin.com/c2ZcuiJK . Thanks for all! – Diaconu Eduard May 02 '16 at 09:42
  • Edited answer. I think that the issue is in js code. – fusion3k May 02 '16 at 17:13
  • @ fusion3k, i don't know how to thank you! I'll check and javascript code and hope to solve the problem. Thank you again! I really appreciate your help! Have a nice day! :) – Diaconu Eduard May 03 '16 at 09:53