Question

I know this has been asked before, and I know you can do it via making a seprate page for each image. But thats not ideal for what I want.

I want to do that age old thing of displaying multiple images from a db on the same page:

echo "<table>";
echo "<tr class ='tablehead'><td>Name</td><td>Location</td><td>Review</td><td>Image</td><td>Thumb</td></tr>";

while ($row = mysql_fetch_array($query))
{   
    echo "<tr>";
    echo "<td>" . $row['user_fname'] . "</td>";
    echo "<td>" . $row['user_location'] . "</td>";
    echo "<td>" . $row['user_review'] . "</td>";
    echo "<td>" . $row['user_image'] . "</td>";
    echo "<td>" . $row['user_thumb'] . "</td>";
    echo "</tr>";
}

echo "</table>";

user_image and user_thumb are blob images, is there someway of showing them all on that page, perhaps setting them to a php variable and then converting to javascript or something along those lines? Rather than:

  header('Content-type: image/jpg');
  echo $thumb;

In a seperate file?

Answer 1

You have basically two problems here:

1. As $thumb contains the binary data of the image, the browser will not understand it unless you tell the browser what data it is (e.g. image/jpg).

2. You need to tell the browser where the data is.

Let’s say you want to create an image displaying the thumb in that page:

<td><img src="..." alt="thumb"></td>

The src attribute tells the browser where it can find the data of the image. So it is used to solve problem 2. It expects an Uniform Resource Locator (URI).

So how to get the $thumb into an URI? There are multiple ways to do that, including the one linked in a comment.

However, if the image is not very large and you don’t need to have it cached specifically (e.g. the HTML should be cached, but not the thumb image), you can make use of a data: URI Scheme^­Wikipedia:

$thumbSrc = 'data:image/jpg;base64,'.base64_encode($thumb);

You then can output that variable as the src attribute’s value:

<td><img src="<?php echo $thumbSrc; ?>" alt="thumb"></td>   

Hope this is helpful.

Complete answer:

echo "<table>";
    echo "<tr class ='tablehead'><td>Name</td><td>Location</td><td>Review</td><td>Image</td><td>Thumb</td></tr>";
    while ($row = mysql_fetch_array($query))
    {   
        echo "<tr>";
            echo "<td>" . $row['user_fname'] . "</td>";
            echo "<td>" . $row['user_location'] . "</td>";
            echo "<td>" . $row['user_review'] . "</td>";                    
            echo '<td><img src="data:image/jpg;base64,', base64_encode($row['user_thumb']), '" alt='thumb'></td>'; 
            echo '<td><img src="data:image/jpg;base64,', base64_encode($row['user_image']), '" alt='image'></td>';
        echo "</tr>";
    }
echo "</table>";