I have an app where users can upload an image to be used as their avatar. The way is set things up are as follows. There's a folder named "Uploads" and when the user selects an image it gets uploaded and stored there and renamed to the user's username then a reference in the database is made referring to that image, so the string in the database will look like this
" ../uploads/username.jpg"
I am using PHP's rawurlencode(); function to handle user names with spaces in them, such as "User admin" so when this user uploads a picture it will be stored in the database like this ../uploads/user%20admin.jpg now when I wanna display that image i'm using rawurldecode(); function but it just isn't working properly as it's decoding in this manner "uploads/user"admin.jpg
This is my PHP to display the image.
<?php
echo '<td class="col-md-3">
<input type="checkbox" name="check_list[]" value="' .$row2['buss_id'].'">'
. '<img src=' . rawurldecode($row2['pic']) .'> '. $row2['username']; ?> </td>
To be more clear, this is how the string is being decoded in the browser
<img src="../uploads/user" admin.jpg>
Thanks.
You're missing quotes. This part of your code:
'<img src=' . rawurldecode($row2['pic']) .'> '
should be this:
'<img src="' . rawurldecode($row2['pic']) .'"> '
The issue with your current code is that it emits something like this:
<img src=../uploads/user admin>
The browser treats the space as a separator between attributes, so it interprets that this way:
<img src="../uploads/user" admin>
Related
I have a gallery script written in PHP, which generates a gallery based on images stored in a given folder. This is working fine for a straight ahead gallery, but I would like to add an srcset value, which generates the gallery from images in a folder marked "big" for high definition screens.
I have tried to replicate the part of the code which generates the small images by including a variable called $imagesBig, but it's only echoing the final image in the folder for each picture generated.
The file names in each folder are identical, only the folder variable changes.
<?php
$rsContent = "rsContent";
$imgContainer = "imgContainer";
$directoryBig = "img/acts/".$category."/".$thisPage."/gallery/big/";
$imagesBig = glob($directoryBig . "*.jpg");
foreach($imagesBig as $imageBig);
$directorySmall = "img/acts/".$category."/".$thisPage."/gallery/small/";
$imagesSmall = glob($directorySmall . "*.jpg");
foreach($imagesSmall as $imageSmall) {
echo "<div class=" .$rsContent. "><div class=" .$imgContainer. "><img src=" .$imageSmall. " srcset='$imageSmall 1x, $imageBig 2x' alt=" .$thisPage. " /></div></div>";
}
?>
I'm hoping the final output will look like this:
<div class="rsContent">
<div class="imgContainer">
<img src="img/acts/theater/kikkerkusje/gallery/small/1.jpg" srcset="img/acts/theater/kikkerkusje/gallery/small/1.jpg 1x, img/acts/theater/kikkerkusje/gallery/big/1.jpg 2x" alt="kikkerkusje">
</div>
</div>
Thanks for any help.
The problem is that you have two completly separate loops, the 'big' loop doesn't actually do anything (the ; on the end of the foreach()) just iterates over the loop with no output.
You need to combine the two sets of results, this assumes that the list of images will appear in the same order in each directory (something a bit fragile - you may be better sorting the lists if this may be a problem).
First get a list of the big images and then when outputting the small images in a loop, pick out the matching big image (using $imagesBig[$index])...
$directoryBig = "img/acts/".$category."/".$thisPage."/gallery/big/";
$imagesBig = glob($directoryBig . "*.jpg");
$directorySmall = "img/acts/".$category."/".$thisPage."/gallery/small/";
$imagesSmall = glob($directorySmall . "*.jpg");
foreach($imagesSmall as $index=>$imageSmall) {
$imageBig = $imagesBig[$index];
echo "<div class=" .$rsContent. "><div class="
.$imgContainer. "><img src=" .$imageSmall
. " srcset='$imageSmall 1x, $imageBig 2x' alt="
.$thisPage. " /></div></div>";
}
I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images
$count = 0;
echo " <div class=\"row\">";
while($row = $result->fetch_assoc()) {
$ext = $row['Extension'];
$ImageID=$row['ImageID'];
if(($count%3) ==0){
echo "</div>";
echo " <div class=\"row\">";
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}else{
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}
}
echo "</div>" ;
Image after link is clicked
<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";
$result = mysqli_query($conn,$query);
$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';
?>
I don't know what to do at this point, how can I provide that zoom in/out functionality?
First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.
Make two folders on your webservers:
images/
thumbnails/
Put your small images in "thumbnails" and large images in "images"
And if you need to, store the image-names in your database, so you can do something more like this:
echo '<img src="images/'+$imageName+'">'
If you want to, you can do an on-demand resizing of your images, using gd-lib.
The basic idea being, in pseudocode:
//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName
This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery
can somebody help me with this little problem here. I am a newbie and I am trying to display an image with a blob data type from my post database table. I do not know where am i going wrong but here is my code.
$res = $conn->query("SELECT post.postid, post.message,post.photo, post.posted_on, users.username FROM
post INNER JOIN users ON post.userid = users.userid ORDER BY
post.posted_on DESC LIMIT 10");
$result = "";
while($row = mysqli_fetch_array($res)){
20204040
$image = $row['photo'];
$result.= '<hr/><form method="post" enctype="multipart/form-data">
<div class="w3-light-grey w3-padding w3-round-xlarge w3-margin-60">'.
'<strong> #'.$row['username'].'</strong>'.
'</span>'.'<br/> '.
'<span class ="ka">'.$row['message'].'</span>'.
'<img src="image/$image"/>'.
'<br/>'.
'<span class="fa fa-comment w3-text-indigo"></span>'.
'<a href="#" id="'.$row['postid'].'" class="w3-text-indigo w3-small w3-border-0 w3-light-grey"'.
' data-toggle="modal" data-target="#replyModal">'."Reply".'</a>'.
'<span class ="w3-tiny">'.$row['posted_on'].'</div></form>';
}
Check your code for starters...What is 20204040 doing sitting in there? That will cause errors, So you need to get rid of that...
In your echo '' and with your concatenation, you have this
'<img src="image/$image"/>'.
Change it to this...
'<img src="image/'.$image.'"/>'.
You did it everywhere else but not in this instance.
You're storing the entire image in a blob column. So, you can't use this stored data as if it were a simple path to a image. So, no chance to do a simple: <img src="image/$image">.
You will need to "cast" the image through a php file that returns an image/jpg content-type, and use this php file as the path, like: <img src="image_builder.php?image_id=999.php">
See the accepted answer of this post: How can I store and retrieve images from a MySQL database using PHP? for more detailed information.
Btw, if you find this too complex, consider storing only the path to an image stored in disk. In that case you only need a varchar column, not a blob one. And so, you may use your approach of echoing <img src="image/$image_path">.
I'm trying to use a URL which just contains an image to use the image on my site. I am using PHP, this is my code:
Echo '<img src= "$link["Image_Link"]" />';`
$link["Image_Link"] points to this link.
I also have many similar links which contain different images, and are called like this one. When I call this on my site I just get a broken image symbol where the real image should be.
Single and double quotes are not interchangable in PHP.
This should work:
Echo "<img src='$link[Image_Link]' />";
or
Echo '<img src="' . $link["Image_Link"] . '" />';
You need to concatenate your variable with your string:
Echo '<img src= "'.$link["Image_Link"].'" />';
Without it your HTML code in final result will look like:
<img src="$link[" Image_Link"]" />
And this is invalid HTML.
I have following code for get image from my database table field.
public function getStudentses() {
$students_data = array();
$query = $this->db->query(
"SELECT * FROM " . DB_PREFIX . "students
WHERE customer_id = '" . (int)$this->customer->getId() . "'");
foreach ($query->rows as $result) {
$students_data[$result['students_id']] = array(
'students_id' => $result['students_id'],
'firstname' => $result['firstname'],
'filename' => $result['filename'],
'image' => $result['image'],
);
}
return $students_data;
}
This is my HTML code for display image:
<img src="<?php echo $result['image']; ?>" />
but when I render my page the image is not display properly its like some symbols like
s4�.���N����萗�p�A#4pbr��]�����F�G�>�v��W
Why its like this? How can I fix my error?
Modern browsers have this support for using raw image data as source.
You can try to use something like:
<img src="data:image/png;<?php echo $result['image']; ?>" />
You should encode the image using base64 and then output something like:
<img src="data:image/png;base64,<?php echo base64_encode($result['image']); ?>" />
I have use image/png for example. If your image is something else, you should use corresponding encType.
Just make sure to read this and this.
You will most likely need to change the header to an image
http://php.net/manual/en/function.header.php
header('Content-Type: image/jpeg');
Most common practice for this (what I've seen) is to build html:
<img src="image.png.php?student_id=<?php echo $result['students_id']; ?>" />
And then image.png.php:
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "students "
"WHERE students_id = '" .(int)$request->getRequestParam('sudent_id') . "'");
// And now display raw content as image
$student = reset( $query->rows);
if( !$student){
header('HTTP/1.0 404 Not Found');
die( 'Blah blah... Blah blah blah');
}
header( 'Content-Type: image/jpeg');
echo $student['image'];
This way you'll be able to create links to images usable from whatever place you'll want (without any database access required on remote site).
Assuming you are storing the raw binary of the image, you can do this:
'image' => base64_encode($result['image']),
Then in the html:
<img src="data:image/png;base64,<?php echo $result['image']; ?>" />
This assumes the image is a png. If not, change the mime type accordingly.
if the image is stored by this code
s4�.���N����萗�p�A#4pbr��]�����F�G�>�v��W
its because you are just copying and pasting this code from database.
be sure where it stored the the name/id of the image and the path of the image and get the image by its path and id/name or follow what Prasanth said to you.
this my help you
How to retrieve images from MySQL database and display in an html tag