Good day everyone, so I have a code here for my site for uploading images to customer profile photos, but if they haven't uploaded yet it shows a broken image, how do I put a placeholder instead of a broken image.
<div class="panel-body">
<a data-target="#myModal" data-toggle="modal" href=
""><img class="img-hover" src="<?php echo web_root. "customer/".$res->CUSPHOTO; ?>"
style="width:100%; height:100%;text-align:center" title=
"profile image"></a>
</div>
This is my code for uploading the image
function doupdateimage(){
$errofile = $_FILES['photo']['error'];
$type = $_FILES['photo']['type'];
$temp = $_FILES['photo']['tmp_name'];
$myfile =$_FILES['photo']['name'];
$location="customer_image/".$myfile;
if ( $errofile > 0) {
message("No Image Selected!", "error");
redirect(web_root. "index.php?q=profile");
}else{
#$file=$_FILES['photo']['tmp_name'];
#$image= addslashes(file_get_contents($_FILES['photo']['tmp_name']));
#$image_name= addslashes($_FILES['photo']['name']);
#$image_size= getimagesize($_FILES['photo']['tmp_name']);
if ($image_size==FALSE ) {
message(web_root. "Uploaded file is not an image!", "error");
redirect(web_root. "index.php?q=profile");
}else{
//uploading the file
move_uploaded_file($temp,"customer_image/" . $myfile);
$customer = New Customer();
$customer->CUSPHOTO = $location;
$customer->update($_SESSION['CUSID']);
redirect(web_root. "index.php?q=profile");
Assuming that "basically has no value" means NULL you could check for that value:
<?php
if (is_null($res->CUSPHOTO)) {
$url = web_root. "customer/anonymous.jpg";
}
else {
$url = web_root. "customer/".$res->CUSPHOTO;
}
?>
<div class="panel-body">
<a data-target="#myModal" data-toggle="modal" href="">
<img class="img-hover"
src=<?php echo '"'.$url.'"' ?>
style="width:100%; height:100%;text-align:center"
title="profile image">
</a>
</div>
Here anonymous.jpg is the image to be displayed when no photo has been uploaded.
Opinion: Personally I don't like mixing the PHP tags into HTML like that. You never know exactly what will happen. I always write either HTML or PHP, not mixed, but I know it can be done. That's the reason I do the strange thing with the quotes around $url, I really don't like a PHP tag inside a HTML string.
Related
am having an issue displaying images stored as blob in my database, as the images doesn't display rather is shows crazy characters and symbols, i tried to change the tags for the php but with no avail. Help and here is my code: Note that i want all types of images to be saved as blob (jpg, jpeg, gif, svg, png) - thanks in advance
<?php
include 'include/connect.php';
$sql = "SELECT * FROM room_details ORDER BY id ASC LIMIT 2, 1;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="room-thumb"><?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,'.$row['image'].'">'; ?>
<div class="mask">
<div class="main">
<h5><?= $row['room_type']; ?></h5>
<div class="price"><?= $row['room_name']; ?><span>a night</span></div>
</div>
Read More
</div>
</div>
} ?>
Since the blob url is decoded with base64, you need to encode it first. You can use either JavaScript or PHP to do this.
JavaScript:
With JavaScript, you can just use the atob() function to encode your base64 url like this:
<script>
var x = <?php echo $row['image'] ?>
document.getELementById("code").innerHTML = atob(x);
</script>
<div class="room-thumb"><?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,' ?><span id="code"></span><?php echo '">'; ?>
<!-- DIV CONTENT HERE -->
</div>
However, as stated in this other SO thread, it would be a better approach if you use PHP itself or other JavaScript approaches (mentioned in that same thread) to retrieve and encode the base64 url as the above approach is not secure.
PHP:
With PHP, you can either encode the base64 url before outputting it into your HTML like this:
<?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,' . base64_encode(.$row['image']).'">'; ?>
Or you can create a new php file, encode the PHP in that file and then echo the encoded base64 url to your HTML like this:
<!-- PHP file -->
<?php
$id = (isset($_GET['id']) && is_numeric($_GET['id'])) ? intval($_GET['id']) : 0;
$image = base64_encode(getImageFromDatabase($id)); // your code to fetch the image
header('Content-Type: image/jpeg');
echo $image;
?>
<!-- HTML -->
<img src="image.php?id=<?php echo $image_id; ?>" />
Check out the accepted answer in this other SO thread for a more in-depth explanation of the above two PHP approaches.
I Have a problem while uploading image to my php page .. i tried this code and its worked and the image uploaded but i can't show it on the page ..
please help ^^
if ($_FILES["img"]["name"]) {
$name = $_FILES["img"]["name"];
$tmp_name = $_FILES['img']['tmp_name'];
$error = $_FILES['img']['error'];
if (!empty($name)) {
$location = '/var/www/html/1.jpg';
if (move_uploaded_file($tmp_name, $location.$name)){
echo 'Image Uploaded';
echo nl2br("\n");
echo nl2br("\n");
echo <<<HEREDOC
<div style="float:left;margin-right:10px">
<img src="{$location}" alt = "Ur Image" width="400" height="400"/>
</div>
HEREDOC;
}
}
else {
echo 'please choose a file';
}
}
I have a feeling that the issue is related to your $location variable. When you save the file, you save it to /var/www/html/1.jpg1.jpg since you do $location.$name, but when you try and display it, you only use the $location, which is /var/www/html/1.jpg.
Essentially, change:
<img src="{$location}" alt = "Ur Image" width="400" height="400"/>
to
<img src="{$location.$name}" alt = "Ur Image" width="400" height="400"/>
EDIT
And as meta pointed out, don't use /var/www/html/... in the image source. If /var/www/html is the root of the website where the PHP file lives, change yout $location variable to
$location = '/var/www/html/';
And change
<img src="{$location}" alt = "Ur Image" width="400" height="400"/>
to
<img src="{$name}" alt = "Ur Image" width="400" height="400"/>
Don't use physical location /var/www... in src, use URL instead (which would depend on your http server configuration). But you can try something like http://your.domain/1.jpg
or localhost/i.jpg or you could even try relative path src="/1.jpg" or src="html/1.jpg"
make sure the image is uploading where you think it is suppoed to go
if(isset($_POST['addImage'])){
if (is_uploaded_file($_FILES['userfile']['tmp_name'])) {
$target_dir = "$myfolder/";
$target_file = $target_dir . basename($_FILES['userfile']['name']);
move_uploaded_file($_FILES['userfile']['tmp_name'], $target_file);
} else {
die('<br>An error occurred importing the file: '.$_FILES['userfile']['error']);
}
then show image with src='$target_file'
I am doing a gallery and using php to get images to show up without hard-coding for each image. I had used the following method for obtaining the images:
<?php
$dir="image/";
//open dir
if ($opendir=opendir($dir))
{
//readdir
while($file=readdir($opendir))
{
if ($file!="."&&$file!="..")
echo "
<div id='item' class='grid-item'>
<a href='$dir/$file'>
<div id='masks' class='mask'></div>
<div id='title' class='text'>$file</div>
<img src='$dir/$file'>
</a>
</div>
";
}
}
?>
The gallery uses jquery for the masonry gallery plugin.
However the file extension is showing up along with the file name. I don't want the extension. I have tried many methods, but they're not working for this case. How can I hide it and what changes can be done to the code in order for it to happen?
You can use pathinfo:
<?php
$dir="image/";
//open dir
if ($opendir=opendir($dir))
{
//readdir
while($file=readdir($opendir))
{
if ($file!="."&&$file!="..")
{
$filename = pathinfo($file, PATHINFO_FILENAME);
echo "
<div id='item' class='grid-item'>
<a href='$dir/$file'>
<div id='masks' class='mask'></div>
<div id='title' class='text'>$filename</div>
<img src='$dir/$file'>
</a>
</div>
";
}
}
}
To get the filename via this method, you must use PHP > 5.2, which you probably should anyway.
My script uploads the selected pictures to a folder but in my other page I have to see it. But I can't see my uploaded picture.
But if I manually drag and drop the picture from the desktop to the folder then I can see the picture on the page.
This is my code where I want show the uploaded picture:
$image = "../images/accommodatie/".$row2['acco_id']."/";
$images = glob($image."*.jpg");
sort($images);
if (count($images) > 0) {
$img = $images[0];
$img = str_replace("../","", $img);
echo "<a href='acco.php'>
<div>
<div>
<img src='$img'>
</div>";
}
I checked a few times, The folder location is correct, so that can not be the problem.
You're missing and closing double quote and a semi colon after your echo :
if (count($images) > 0) {
$img = $images[0];
$img = str_replace("../","", $img);
echo "<a href='acco.php'>
<div>
<div>
<img src='$img'>
</div>"; //<----- SEMI COLON HERE
}
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.