How to retrieve image from database to html form?

Question

I save my image name to my database and image itself to upload file.

When the user want to see them, I want to show them to user with in a div.

Here things get messy in my mind.

here is my php code

        $con = mysql_connect("localhost","root","");
        if (!$con){die('Could not connect: ' . mysql_error());}
            mysql_select_db("marmaris", $con);
            $bilgi= mysql_query("SELECT * FROM ".$isim." WHERE id='".$id."'");

            while($sutun= mysql_fetch_array($bilgi))
            {
                 $name=$sutun["name"];
                 $bures=$sutun["resbuyuk"];
                 $kures=$sutun["reskucuk"];
                 $aciklama=$sutun["aciklama"];
                 $map=$sutun["map"];
                 $link=$sutun["link"];

            }
            $words = preg_split('/[\s?]+/', $kures);
            $result = count($words);
            for($i=0;$i<$result;$i++){
                $city=$words[$i];
            }

i got 6 images now $city is one of the image forexample i want to show the user that image.

this is my html part don't worry about the isimid name its just sending 2 words at one time.

 <div id="kucukres">
    <img src="upload/<?php echo $city ?>" alt="Angry face" width="32" height="32" />
    </div>

I want to show the image but it only writes the alt words.

In summary, I want to show image that has saved (the name) in database and itself in the upload folder.

With php part, I take the name of the file from database; in html, I want to show that image.

edit : this is my new html tag.

   <div id="kucukres">
   <img src="getres.php?file=<?php echo $isimid;?>"/> 
    </div>

and my php file is

$bilgi= mysql_query("SELECT reskucuk FROM ".$isim." WHERE id='".$id."'");

            while($sutun= mysql_fetch_array($bilgi))
            {

                 $kures=$sutun["reskucuk"];

            }
            $words = preg_split('/[\s?]+/', $kures);
            $result = count($words);
            //unlink("upload/$word[$isim]");
            for($i=0;$i<$result;$i++){
                $city=$words[$i];
                header('Content-type: image/jpeg'); 
                $pic = 'upload/'.$city; 
                 echo $pic;

but still i cant see the image in my html file.

Answer 1

There is no shortage of tutorials and samples on this subject.

Essentially, what you're trying to do involves two PHP files, not just the one that you have. You'll need one for the page and one for the image (which can be re-used for all images).

Start by taking a look at the HTML that's rendered for your page. What is the img tag referencing? It's looking for a resource (image file) on the server that isn't there, so naturally it's not displaying anything. Your server logs will also show you the 404 errors for those image requests.

This is because the image isn't really part of the page. It's an entirely separate resource that the page is just referencing, the browser's job is to put it in place. So you need to create a separate resource (PHP file) to serve that image.

My PHP is a bit rusty, so I'll defer to the many examples and tutorials online for the specifics. But the structure would basically be as such:

---

Page A, the host page:

Fetch from the database information about the image. Its ID, its alt text if applicable, etc. Use this information to build the img tag. Something like:

echo '<img src="/images/dbimage.php?id=' . $id_from_db . '" alt="' . $alt_from_db . '"/>';

---

Page B, the image page:

Fetch the actual image (blob) from the DB and its content-type if that's also dynamic. Write no output before this is done. Set the response header's content-type to the content-type of the image, write the raw image bytes as output, end the output.

---

The main thing to remember, again, is that the image isn't being sent to the browser as part of the page. It's an entirely separate resource fetched from an entirely separate request to the server. You just need to handle that request separately from the page itself.

(Note, for example, that if you then navigated to the URL generated for the img tag then the server would display just the image. The host page isn't needed.)