Image display issues (search engine)!

phpfanboi

hello all,
I am new to php , i have this search engine which is displaying every field correctly to my table , except for the $img variable. I am not sure if it has something to do with "php headers" which tell the browser to render an image?
Please see the attachment after reading my code to see the output , thankyou.

<?php

//get data
$button = $_GET['submit'];
$search = $_GET['search'];


$s = $_GET['s'];
if (!$s)
$s = 0;


$e = 10; // Just change to how many results you want per page


$next = $s + $e;
$prev = $s - $e;




 if (strlen($search)<=2)
  echo "Must be greater then 3 chars";
 else
 {
  echo "<br /><table><tr></td><td><form action='search.php' method='GET'><input type='text' onclick=value='' size='50' name='search' value='$search'> <input type='submit' name='submit' value='Search'></form></td></tr></table>";

  //connect to database
  mysql_connect("localhost","root","enter");
  mysql_select_db("software");

   //explode out search term
   $search_exploded = explode(" ",$search);

   foreach($search_exploded as $search_each)
   {

    //construct query
$x++;
if ($x==1)
 $construct .= "keywords LIKE '%$search_each%'";
else
 $construct .= " OR keywords LIKE '%$search_each%'";

   }

  //echo outconstruct
  $constructx = "SELECT * FROM searchengine WHERE $construct";

  $construct = "SELECT * FROM searchengine WHERE $construct LIMIT $s,$e";
  $run = mysql_query($constructx);

  $foundnum = mysql_num_rows($run);


  $run_two = mysql_query("$construct");

  if ($foundnum==0)
   echo "No results found for <b>$search</b>";
  else
  {
   echo "<table bgcolor='#0000FF' width='100%' height='1px'><br /></table><table bgcolor='#f0f7f9' width='100%' height='10px'><tr><td><div align='right'>Showing 1-10 of <b>$foundnum</b> results found for <b>$search.</b></div></td></tr></table><p>";

   while ($runrows = mysql_fetch_assoc($run_two))
   {
    //get data
   $title = $runrows['title'];
   $desc = $runrows['description'];
   $url = $runrows['url'];
   $img = $runrows['image'];        <- row where my image is installed in database




   echo "<table width='400px'>
   <h4><a href='http://$url'><b>$title</b></a><br />
   $desc<br>
   <font color='00CC00'>$url</font></h4>
   <tr><image>$img</image></table>          <- trying to get this to display
   ";
   }



?>

<table width='100%'>
<tr>
<td>
<div align="center">

<?php
if (!$s<=0)
 echo "<a href='search.php?search=$search&s=$prev'>Prev</a>";

$i =1; 
for ($x=0;$x<$foundnum;$x=$x+$e)
{


 echo " <a href='search.php?search=$search&s=$x'>$i</a> ";


$i++;


}

if ($s<$foundnum-$e)
  echo "<a href='search.php?search=$search&s=$next'>Next</a>";

}
}  


?>
</div>
</td>
</tr>
</table>

If you need to see the database i will post it . Any help will be greatly appreciated.
in regards to the databse longblob , mime-type:image/png , browser transformation:image/png inline.
Thanks again , im stumped.

johanafm

If you send content-type header for image/, you can only send image data for one image of the type actually used instead of . Since you are sending xhtml data, you should use content-type header application/xhtml+xml, although text/html works as well.

So, using the approach you have, what you need to do is use valid markup. Using a validator on your (x)html markup is highly recommended. There is no <image> element. The markup for image element is <img>, but it is not used the way you do it iether. It contains replaced content: i.e. the element is always empty (<img .../> and never <img>...</img>). Empty Elements shows the syntax for empty elements, and also has an example on the usage for the <img> element.

I'd also recommend moving your image data out of the database, and use ordinary file storage. With your current approach, the src attribute of the image element has to be a php-script (or similar) which accesses the database once again (per image), retrieves the image data, sends the appropriate content-type: image/... header and then echoes the image data (and nothing else).

If you used ordinary file storage, you'd only need to access the database once, set the href to the file matching your database image entry, and have the webserver retrieve the correct file automatically. This approach would also allow you to place static content such as images on another web server, to remove load from your main web server(s) and database(s). Additionally, serving static content works great with the open source web server lighty (lighttpd).

phpfanboi

johanafm;10962121 wrote:
If you send content-type header for image/, you can only send image data for one image of the type actually used instead of . Since you are sending xhtml data, you should use content-type header application/xhtml+xml, although text/html works as well.

So, using the approach you have, what you need to do is use valid markup. Using a validator on your (x)html markup is highly recommended. There is no <image> element. The markup for image element is <img>, but it is not used the way you do it iether. It contains replaced content: i.e. the element is always empty (<img .../> and never <img>...</img>). Empty Elements shows the syntax for empty elements, and also has an example on the usage for the <img> element.

I'd also recommend moving your image data out of the database, and use ordinary file storage. With your current approach, the src attribute of the image element has to be a php-script (or similar) which accesses the database once again (per image), retrieves the image data, sends the appropriate content-type: image/... header and then echoes the image data (and nothing else).

If you used ordinary file storage, you'd only need to access the database once, set the href to the file matching your database image entry, and have the webserver retrieve the correct file automatically. This approach would also allow you to place static content such as images on another web server, to remove load from your main web server(s) and database(s). Additionally, serving static content works great with the open source web server lighty (lighttpd).

Thank you for a very detailed post , i want to look at doing the way you suggested , are there any tutorials here?if not thanks again 🙂 cheers.

jeremyphphaven

How are you storing the image data in the table? Below I'll assume you're saving them base64 encoding.

It's ok to use this approach as there are pros and cons to both approaches really, just watch your DB size eh.

You'd want to store the file mime type also in the database (image/gif, image/jpeg, image/png, etc.) so you could determine a file extension.

To display the picture, use an <img> html tag and format it like so:

<img src="data:image/gif;base64,DATABASE_DATA..." />

Make sense?

phpfanboi

jeremyphphaven;10962165 wrote:
How are you storing the image data in the table? Below I'll assume you're saving them base64 encoding.

It's ok to use this approach as there are pros and cons to both approaches really, just watch your DB size eh.

You'd want to store the file mime type also in the database (image/gif, image/jpeg, image/png, etc.) so you could determine a file extension.

To display the picture, use an <img> html tag and format it like so:
<img src="data:image/gif;base64,DATABASE_DATA..." />
Make sense?

Ok i get what you have pointed out to me , thank you for those tips.
So obviously this will be placed in my echo statement where my other array variables are echod

<img src="data:image/gif;base64,DATABASE_DATA..." />

Just curious could you give me an example as to where my base 64 variable ($img)will sit in the in between the <img src tags> ,, thanks again made some things very clear thank you.

ie:

$title = $runrows['title'];
$desc = $runrows['description'];
$url = $runrows['url'];
$img = $runrows['image']; <- image var

echo "<table width='400px'>
<h4><a href='http://$url'><b>$title</b></a><br />
$desc<br>
<font color='00CC00'>$url</font></h4>
<tr>]<img src="data:image/gif;base64,DATABASE_DATA..." /></table> <- where do i place $img var?

";
}
  [/QUOTE]
If this looks like the work of an amatuer to you your thinking correctly , thanks again 🙂

johanafm

Use [ php] [ /php] tags instead of the code tags, and you'll get syntax highlighting which would show you problems with your string literal (since you do not escape your double quotes). I hope you are using an editor which gives syntax highliting. Else it's hard to spot errors like this.

echo "<table width='400px'>
<h4><a href='http://$url'><b>$title</b></a><br />
$desc<br>
<font color='00CC00'>$url</font></h4>
<tr>]<img src="data:image/gif;base64,DATABASE_DATA..." /></table> <- where do i place $img var?
";

You could simply change the double quotes for the img src attribute to single quotes. And assuming $img holds base64 encoded data, just replace "DATABASE_DATA..." with your variable

echo "<table width='400px'>
<h4><a href='http://$url'><b>$title</b></a><br />
$desc<br>
<font color='00CC00'>$url</font></h4>
<tr>]<img src='data:image/gif;base64,$img' /></table>";

And unless all your images are of type gif, you'd need to do the exact same thing with the image type, by replacing "gif" with data from the db that keeps track of the image type.

phpfanboi

And unless all your images are of type gif, you'd need to do the exact same thing with the image type, by replacing "gif" with data from the db that keeps track of the image type.

Thank you again for the advice so far , the error i did notice , but unfortunately i didn't have permission to fix it.

  [QUOTE]echo "<table width='400px'> 
  <h4><a href='http://$url'><b>$title</b></a><br /> 
  $desc<br> 
  <font color='00CC00'>$url</font></h4> 
  <tr><img src='data:image/gif;base64,$img' /></table>";
  [/QUOTE]

 I am using the above syntax , with the <img src /> tag as you see it now.

 My image row in the database :
 Type is Binary , length is 255.
 Mime type : image/png
 Browser transformation: Whats recommended?Can u explain this?

I am putting the encoded base 64 string into the image field , so all is correct 
i am sure , my problem now is the actual image is about 50px*50px , and it is   only displaying a line height of 2px and i can see only  portion of my image , i would imagine this as being table height related ?Please see uploaded image:

phpfanboi

It's meant to be a blue square , u can see a blue line that's it , if you take a look.
Mate you have taught me alot me appreciate it , even if you can't help thankyou.

phpfanboi

phpfanboi;10962220 wrote:
It's meant to be a blue square , u can see a blue line that's it , if you take a look.
Mate you have taught me alot me appreciate it , even if you can't help thankyou.

<tr><img src='data:image/png;base64,$img' /></table>"; <- using png now

phpfanboi

phpfanboi;10962283 wrote:
<tr><img src='data:image/png;base64,$img' /></table>"; <- using png now

And it's still displaying the same as gif , in regards to the picture i uploaded . Gosh i have made a mess on this forum 😃

phpfanboi

Solved , i just assigned type "Varchar" and give it the appropriate length , and now it's displaying correctly - thank you very much , couldn't have done it without you champ.