CODEWITHSUNDEEP
phphtmlimagemysqliblob
blackmail242
blackmail242

Reputation: 3

Getting "The Image cannot be displayed because it contains an error"

I am image data on my database as a mediumblob and trying to retrieve it as an image when the user selects a picture by it's corresponding id. Before anyone jumps down my throat, yes I am aware that it is a smoother process to store on a file server and retrieve it that way however this is for a class and this is how the professor wants it. 

 <HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOB Data Type Tutorial</title>
</head>

<body>
<form action="images.php" method="POST" enctype="multipart/form-data">
    Select Picture: <input type="pictureID" name="pictureID"> <input type="submit" value="submit" name="submit"> 

</form>
<?php

    $link = mysqli_connect('127.0.0.1:3306','user','');
    $link;
    mysqli_select_db($link, "media");

    $sql = "SELECT * FROM images";
    $result = mysqli_query($link,$sql);
    echo "<table>";
    echo "<tr><th>Picture</th><th>Size KB</th><th>Title</th></tr>";

    if($result === FALSE){
        echo "failed";
        die(mysql_error());
    }

    while($row = mysqli_fetch_array($result)) {
        $Picture = $row['Picture'];
        $Size = $row['Size KB'];
        $Title = $row['Title'];
        echo "<tr><td style ='width: 50px;'>".$Picture."</td><td style='width: 60px;'>".$Size."</td><td>".$Title."</td></tr>";
    }

    echo "</table>";

    if(isset($_POST['pictureID']))
    {
   $imgId = $_POST['pictureID'];
   echo $imgId;
   if (!empty($imgId)) {
   $sqliCommand = "SELECT Picture FROM images WHERE Picture = $imgId";
   $result = mysqli_query($link, $sqliCommand);
   $row = mysqli_fetch_assoc($result);
   header("Content-type: image/jpeg");
   echo $row['Image'];
    }
    }
    else
    {
        echo "^ Please select a picture! ^";
    }
?>


<br>
 <h4> 
     <a href="./index.html">Main Menu</a> <br>
</h4>
</body>
</HTML>

Any Hint/Help is appreciated!

Upvotes: 0

Views: 3601

Answers (1)

Zeus
Zeus

Reputation: 1275

This is caused because there is html code on top of page too. When header("Content-type: image/jpeg"); is executed chrome interprets the content of whole page as image data in which html is included.

To fix this put the image output when id is passed code at top of script and exit the script as soon as you output the image else the code below it will be outputted too.

It should be done like this :

<?php
    //this should be at top of php file, above html code
    $link = mysqli_connect('127.0.0.1:3306','user','');    
    mysqli_select_db($link, "media");
    if(isset($_POST['pictureID']))
    {
        $imgId = $_POST['pictureID'];
        //echo $imgId; nothing else expect image should be echoed
        if (!empty($imgId)) {
            $sqliCommand = "SELECT Image FROM images WHERE Picture = $imgId";// select Image here so not select picture as you did earlier 
            $result = mysqli_query($link, $sqliCommand);
            $row = mysqli_fetch_assoc($result);
            mysqli_close($link);//close mysqli as script gonna exit after echoing image.
            header("Content-type: image/jpeg");
            echo $row['Image'];
            exit();// this is important
        }
    }  
?>
<html>
    <body>  
    <!-- rest of the code -->

Read the comments I wrote in code.

There must be nothing expect image binary code on page if you set the header as image type.

If the problem persists then comment the header line(this will make page appear in text form) and see if there is anything else in page expect image data in binary form.

Upvotes: 1

Related Questions