Image not showing (broken image) but search works - php

Question

i'm new in programming and have been working on a searchable database which can retrieve images by typing in keywords and after pressing submit will show results and the picture.
But so far i have no luck in getting the picture to show(broken link/image) but my search form does work and does correctly retrieve the name or result.
My table in phpmyadmin name is shoes , and i have 3 columns, 1 id (int15 PRI) ,2 brand/model (varchar 50), 3 picture (longblob).
My code is relative simple and hope you can help me out =)
File name: search.php
<form action="search.php" method="POST">
Name: <input type ="text" name="search_name"> <input type="submit" value="Search">
<?php
if (isset($_POST['search_name'])) {
$search_name = $_POST['search_name'];
if (!empty($search_name)){
if (strlen($search_name)>=3) {
$query = "SELECT * FROM `shoes` WHERE `brand/model` LIKE '%".mysql_real_escape_string($search_name)."%'";
$query_run = mysql_query($query);
$query_num_rows = mysql_num_rows($query_run);
if ($query_num_rows>=1) {
echo $query_num_rows.' Results found:<br>';
while ($query_row = mysql_fetch_array($query_run)) {
$picture = $query_row['picture'];
echo "</br>";
echo $query_row ['brand/model'];
echo "</br>";
echo "</br>";
//header("content-type: image/jpeg");
echo "<img src=image.php?id=".$row['id']." width=300 height=200/>";
echo "</br>";
}
} else {
echo 'No Results Found.';
}
} else {
echo 'Text field must be more than 3 characters.';
}
} else {
echo 'Text Field Cannot be Empty!';
}
}
?>
i have a image.php here
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
$conn = mysql_connect("localhost","root","");
if(!$conn){
echo mysql_error();
}
$db = mysql_select_db("phsdatabase");
if(!$db){
echo mysql_error();
}
$id = $_GET['id'];
$query = "SELECT `picture` FROM shoes where id='$id'";
$query_run = mysql_query("$query",$conn);
if($query_run){
$row = mysql_fetch_array($query_run);
$type = "Content-type: image/jpeg";
header($type);
echo $row['picture'];
} else {
echo mysql_error();
}
?>
storeinfo.php to store new info,
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
$conn = mysql_connect("localhost","root","");
if(!$conn)
{
echo mysql_error();
}
$db = mysql_select_db("phsdatabase",$conn);
if(!$db)
{
echo mysql_error();
}
#$brandmodel = $_POST['brand/model'];
#$picture = addslashes (file_get_contents($_FILES['picture']['tmp_name']));
#$image = getimagesize($_FILES['picture']['tmp_name']);//to know about image type etc
//$imgtype = $image['mime'];
if (isset($_POST['brand/model'])){
$brandmodelentry = $_POST['brand/model'];
if (!empty($brandmodelentry)){
if (strlen($brandmodelentry)>=3) {
$query ="INSERT INTO shoes VALUES('','$brandmodel','$picture')";
$query_run = mysql_query($query,$conn);
echo '<br>';
echo "Information Stored Successfully!";
} else {
echo mysql_error();
}
echo '<br>';
echo '<br>';
echo "Thank you for Registering new information to our database!";
} else{
echo 'Text Field cannot be empty!';
}
}
?>
newentry.php which register new info
<form enctype="multipart/form-data" action="storeinfo.php" method="POST">
<center>Shoes Information</center>
Brand and Model Name<input type=text name="brand/model">
Picture of Shoes(Acceptable formats:<br>JPEG,JPG,PNG)<input type="file" name="picture" id ="picture">
<input type=submit name="submit" value="Store Information">

Answer 1

Your code is absolutely correct except single line i.e.
echo "<img src=image.php?id=".$row['id']." width=300 height=200/>";
You have to change the line to :
echo '<img src="data:image/jpeg;base64,'
.base64_encode($image['file_data']).'" width=300 height=200/>";

Answer 2

In my experience, the problem my image was broken when I tried to display it from database is the the length of the image, I mean from the database where you put the length of a varchar you should change it to long text.

Answer 3

Your image source should be image file extension not php extension, Please check :
echo "<img src='any jpg,png or gif exetension path' width='300' height='200' />";
for example:
echo "<img src='imagename.png' width='300' height='200' />";