trying to make this code render images in rows all to no avail. I initially tried to use boostrap's row and column classes and it didn't work. Then I tried the table element still no result. could you spot the problrm?
// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC LIMIT 5");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$imageURL = 'uploads/'.$row["file_name"];
?>
<!-- begin post -->
<div class="container recent-posts">
<table>
<tr>
<td class="card" style="width: 18rem;">
<img src="<?php echo $imageURL; ?>" alt="" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</td>
<?php }
}
else{ ?>
<p>No image(s) found...</p>
<?php } ?>
</tr>
</table>
</div>
I've swapped in your db code for an array and foreach, but it is in the same spirit.
Use indentation, to help you get your loops and tags in order.
<?php
$images = [
['file_name' => 'foo.jpg'],
['file_name' => 'bar.jpg'],
['file_name' => 'baz.jpg'],
]
?>
<html>
<?php if(!empty($images)) { ?>
<table>
<tr>
<?php foreach($images as $row) { $imageURL = 'uploads/'.$row["file_name"]; ?>
<td class="card" style="width: 18rem;">
<img src="<?php echo $imageURL; ?>" alt="" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</td>
<?php } ?>
</tr>
</table>
<?php } else { ?>
<p>No image(s) found...</p>
<?php } ?>
</html>
As others have said, there isn't anything really to be gained here by using a table.
Does it show you the rest of the html elements or does it show you the message that there is no picture?
Check with the inspect tool what location the src attribute of the img element is.
You can add a backslash in the $imageURL variable
$imageURL = '/uploads/' . $row["file_name"];
Show us the structure and a record of the images table.
Give us more details about what happens when the page is loaded. Like what it loading in your page.
I suggest you ditch the tables and use boostrap instead.
Example here: https://getbootstrap.com/docs/4.0/components/card/
Related
Hi i wanted to know how i want to know how i would write the image tag and access the string to get the image out of the database. When i refresh my page it only shows the title that i have got out of the database and not the image i want to know how i can get the image out of the database in the heredoc.
In my database i have a string for example Images/pokemon.png
<?php
foreach ($result as $row) {
echo <<<_END
<h4 class="card-title mt-5"> $row->title</h4>
<img src="<?php echo base_url('application/' . $row->image)?>" alt=""/>
_END;
}
?>
The closing identifier must not be indented, so it should look like this.
<?php
foreach ($result as $row) {
echo <<<_END
<h4 class="card-title mt-5"> $row->title</h4>
<img src="<?php echo base_url('application/' . $row->image)?>" alt=""/>
_END;
}
?>
For reference
I have an employee database which includes images as well as their work location (specialty). I have created a page where I fill out a form and upload the image to a directory and the path to the database. I then load the main page where I pull in all the images from the database (into the "photos" DIV. Everything works fine.
What I would like to do is reload the images in the DIV based on a MySQL query from a button. For example, instead of showing all employees, I only want to see those who have a specific job function i.e. Management. I currently have this accomplished by redirecting to a new page, where I run a specific query and that works fine as well. However, I'd like to learn how this is done without creating a new page for each query. I've spent many days looking at AJAX and PHP tutorials, which I how I was able to accomplish what I have, but I can't find a method to do what I want. This is the relevant part of my code:
Main.php
<div class="container-fluid">
<div class="row">
<div class ="col-lg-12" style="width: 18%; height: 100%; border:3px solid red;">
MANAGEMENT
HIGH
</div>
<?php
include ('db_connect.php');
//include_once ('functions.php');
$result = $db->query("SELECT * from monctonfir order by initials ASC");
if($result->num_rows > 0){
while ($row = $result->fetch_assoc()){
$imageURL = 'image/'.$row["file"];
$initial = $row["initials"];
$name = $row["name"];
?>
<div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
<div class="card text-center" style="width: 5rem;">
<a href = "#">
<img class="img card-img-top" src = "<?php echo $imageURL ?>">
</a>
<div class = "card-body">
<h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial ?></h5>
</div>
</div>
</div>
<?php }
} ?>
</div>
Can someone point me in the right direction?
Thanks!
You don't need jQuery for what you are doing. You can use query/GET parameters to build your sql so you don't have to create a different page. Like:
<div class="container-fluid">
<div class="row">
<div class ="col-lg-12" style="width: 18%; height: 100%; border:3px solid red;">
MANAGEMENT
HIGH
ALL
</div>
<?php
include ('db_connect.php');
//include_once ('functions.php');
$sql = "SELECT * from monctonfir WHERE 1 ";
if(isset($_GET['job'])) $sql .= " AND job = '".$_GET['job']."' ";
$sql .= " order by initials ASC";
$result = $db->query($sql);
if($result->num_rows > 0){
while ($row = $result->fetch_assoc()){
$imageURL = 'image/'.$row["file"];
$initial = $row["initials"];
$name = $row["name"];
?>
<div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
<div class="card text-center" style="width: 5rem;">
<a href = "#">
<img class="img card-img-top" src = "<?php echo $imageURL ?>">
</a>
<div class = "card-body">
<h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial ?></h5>
</div>
</div>
</div>
<?php }
} ?>
</div>
The simplest way is to use the load function of Jquery
Jquery
For example:
$( "#divID" ).load( "loadEmploye.php", { parameters1: 25, parameters2:3 });
I have inserted image into database and store name in the table.
my image is saved in a folder named 'Uploads'.
Now need to retrieve image from the databse and display it. when I try to display It only shows the image name which is taken from my table.but it does not show the image.
retrieving code is given below
$sql="SELECT * FROM candi_profile WHERE can_email='{$_SESSION['usr_email']}'";
$result=mysqli_query($con,$sql);
if(!$result) die(mysqli_error($con));
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Employer Dashboard
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4">
<?php
while($rows=mysqli_fetch_array($result)){
$c_id = $rows['can_id'];
var_dump($c_id);
?>
<p class="lead"><?php echo $rows['can_name'] ?></p>
<div class="profile-sidebar">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<p class="lead">
<?php echo $rows['pic_name'] ?></p>
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Marcus Doe
</div>
<div class="profile-usertitle-job">
<?php echo $rows['can_city'] ?>
<i class="glyphicon glyphicon-map-marker">
</i>
</div>
<div class="profile-usertitle-job">
<i class="glyphicon glyphicon-envelope"></i>
<?php echo $rows['can_email'] ?>
</div>
<div class="profile-usertitle-job">
<?php echo $rows['can_country'] ?>
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<div class="profile-userbuttons">
<hr>
</div>
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<?php
}
?>
</div>
you can use this code to retrieve image from database
<?php
include 'connection.php'
?>
<?php
$result = mysql_query("SELECT * FROM table") or die(mysql_error());
?>
<table border="1" cellpadding="5" cellspacing="5">
<tr> <th>Image</th></tr>
<?php
while($row = mysql_fetch_array($result)) {
$id = $row['id'];
?>
<tr>
<td><img src="uploads/<?php echo $row['pic_name'];?>" alt=" " height="75" width="75"></td>
</tr>
<?php
}
}
?>
</table>
I assume that the content of $rows['pic_name'] is string only as said on your question.
Put an image attribute and call the path of the image with the corresponding filename save on the database.
<img src = "<path>/<?php echo $rows['pic_name'] ?>" />
NOTE:
Make sure the image is existing on your desire path.
Use image tag to display the image and give it path to the image folder
<img src="your path/<?php echo $rows['pic_name'] ?>" />
friend instead of making images folder you should make a new image column(i.e "imageColumn ") type as blob then
You need to create another php script to return the image data, e.g. getImage.php.
home.php(or display image page) code
<body>
<img src="getImage.php?id=1" width="175" height="200" />
</body>
Then getImage.php is
<?php
$id = $_GET['id'];
// do some validation here to ensure id is safe
$link = mysql_connect("localhost", "root", "");
mysql_select_db("dvddb");
$sql = "SELECT imageColumn FROM Tablename WHERE id=$id";
$result = mysql_query("$sql");
$row = mysql_fetch_assoc($result);
mysql_close($link);
header("Content-type: image/jpeg");
echo $row['imageColumn '];
?>
First fetch image from database using query
The imagejpeg() function is an inbuilt function in PHP which is used to display image to browser or file.
Get data using function ob_get_contents();
Display image in page with height and width
$id = $_GET['id'];
$sql = "select image from table where id='".$id."'";
$res = mysqli_query($sql);
$row = mysqli_fetch_assoc($res);
$image = $row['image'];
ob_start();
imagejpeg($image, null, 50);
$data = ob_get_contents();
ob_end_clean();
echo "<img src='data:image/jpg;base64,'".base64_encode($data)."' style='border:1px
black; border-radius:10px; width:100px; height:125px;'>";
Managed to upload images successfully, am now trying to view the image but am failing to. Am not getting an error. the rest of the data is outputted except the image.
My model
function mycon(){
$client_id = $this->session->userdata('client_id');
$area = $this->session->userdata('area');
$this->db->select('*'); // the select statement
$this->db->where('client_id',$client_id);
$this->db->or_where('consignment.status',0);
$this->db->or_where('consignment.status',1);
$this->db->or_where('consignment.status',2);
$q = $this->db->get('consignment'); // the table
return $q;
}
Part of my controller
$data['v']=$this->Clientaccount_model->mycon();
My View
<?php
foreach ($v->result() as $row) { ?>
<section class="invoice">
<div class="row invoice-info">
<div class="col-sm-3 invoice-col">
<img src="<?php echo base_url()?>/uploads/" width="100">
</div><!-- /.col -->
<div class="col-sm-5 invoice-col">
<address>
LuggageID: <?php echo $row->luggage_id;?><br>
Lagguage Location: <?php echo $row->l_area;?><br>
Lagguage Destination: <?php echo $row->d_area;?><br>
Lagguage Description: <?php echo $row->description;?><br>
Date: <?php echo $row->dom;?><br>
</address>
<?php } ?>
My Table structure
Columns
luggage_id,
client_id,
l_area,
l_address,
d_area,
preferred,
dom,
tom,
description,
mass,
record_id,
filename,
size,
upload time,
status,
Image folder is uploads and its on the root
I suppose that your filename row in your db is about your image, but in your view, you only have <img src="<?php echo base_url()?>/uploads/" width="100"> , never give the name of image like <img src="<?php echo base_url()?>/uploads/<?= $row->filename?>" width="100"> , isn`t it?
Im little bit stuck on a logic.scenario is i have a slider where two images are shown at a time taking 50%-50% part of screen,here is the simple html of it,
<div class="zeus-slider zeus-default" >
<div class="zeus-block">
<div class="zeus-slide s-50"> <img src="slider/slider1.jpg" data-effect="slideRight" alt="" /> </div>
<div class="zeus-slide s-50"> <img src="slider/slider2.jpg" data-effect="slideRight" alt="" /> </div>
</div>
</div>
here every block contains two images i have shown only one.now i have trying to make it dynamic, but i didnt get any idea how it will work, so i created database with two tables, each for individual image in a single block.Both table have fields like simg_id(A_I),img_name,simg_path.
here its my php on slider page.
<div class="zeus-block">
<?php
$slider_slt=getResultSet('select * from slider_img_master1 ORDER BY simg_id');
if(mysql_num_rows($slider_slt))
{
while($slider_data=mysql_fetch_assoc($slider_slt))
{
?>
<div class="zeus-slide s-50"> <img src="slider/first/<?php echo $slider_data['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
<?php
$slider_slt2=getResultSet('select * from slider_img_master2 ORDER BY simg_id');
if(mysql_num_rows($slider_slt2))
{
while($slider_data2=mysql_fetch_assoc($slider_slt2))
{
?>
<div class="zeus-slide s-50"> <img src="slider/second/<?php echo $slider_data2['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
</div>
now the problem is when i try to fetch path of image in slider, images are not changing one by one on both half of screen.instead it showing like both images from from both table top, another two images from both tables below 1st both, and so on , so full page is covered with images.
I know this idea of creating two tables for getting two images at once is silly,but i could not think any better.if any one can suggest any better way, it would be so helpful.
Update:getResultSet is function for mysql_query.
if anybody interested i found an answer for above question.
<div id="slide1" >
<div class="zeus-slider zeus-default" >
<?php
$slider_str="select *from slider_img_master1 where simg_status='Active'";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
echo '<div class="zeus-block">';
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
echo '<div class="zeus-block">';
}
?>
<div class="zeus-slide s-50"> <img src="slider/<?php echo $row['simg_path'];?>" data-effect="slideRight" alt="" /> </div>
<?php
if($i%2==0)
{
echo '</div>';
}
$i++;
}
} ?>
</div>
<div class="clear"> </div>
<div class="next-block"> </div>
<div class="prev-block"> </div>
</div>