how to display image from database using jquery

Question

I have a problem with displaying an image using jquery. The image is retrieved from the database, and i want to display it using jquery. below is my codes

index.php

<?php 
require_once("db.php");

if(isset($_POST['input'])):

$id = $_POST['id'];

    $selectImage = mysqli_prepare($link,"SELECT product_image FROM products WHERE id = ? ");
    mysqli_stmt_bind_param($selectImage, "i",$id);
    mysqli_stmt_execute($selectImage);
    mysqli_stmt_bind_result($selectImage,$image);
    mysqli_stmt_fetch($selectImage);

    if($image):
      echo $image;

    else:
       echo "no image to display";
    endif;

endif;
?>

ajax.php

function imgViews(){
    $(".imageView").click(function(){
        var id = $(this).attr("id");

        $.ajax({
                url: 'class/display_image.php',
                type: 'POST',
                data: {input: 'input',
                       id:id
                   },
                success:function(data){
                 ****display image*****
                },
                dataType: "text"
        });
    });
}
imgViews();

displayHere.html

<div id="imageContainer>
    <img src="img/...."> 
</div>

just send entire image tag with src from server, and .html() to the div. — Devsi Odedra
– Devsi Odedra, Commented Feb 13, 2019 at 7:16
@DevsiOdedra, please share your answer as an answer instead of a comment. — dmh
– dmh, Commented Feb 13, 2019 at 7:34
@dmh given answers are also do the same thing so OP can use it. — Devsi Odedra
– Devsi Odedra, Commented Feb 13, 2019 at 7:40
Sorry @DevsiOdedra, I couldn't see that when I added my comment (from triage). — dmh
– dmh, Commented Feb 13, 2019 at 17:28

Ryuk Lee · Accepted Answer · 2019-02-13 07:16:38Z

1

Try this

success:function(data){
   $('#imageContainer').html('<img src="'+data+'"/>');
},

answered Feb 13, 2019 at 7:16

Ryuk Lee

7445 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kabir Safi · Accepted Answer · 2019-02-13 07:47:47Z

1

i hope this will help you

$("#imageContainer img").attr("src", data);

answered Feb 13, 2019 at 7:47

Kabir Safi

878 bronze badges

Comments

Harry baldaniya · Accepted Answer · 2019-02-13 07:22:32Z

0

index.php

<?php 
require_once("db.php");
if(isset($_POST['input'])):
$id = $_POST['id'];
$selectImage = mysqli_prepare($link,"SELECT product_image FROM products WHERE id = ? 
");
mysqli_stmt_bind_param($selectImage, "i",$id);
mysqli_stmt_execute($selectImage);
mysqli_stmt_bind_result($selectImage,$image);
mysqli_stmt_fetch($selectImage);

if($image):?>
<div id="img_id"><?php echo $image; ?></div> 
<?php  
else: ?>
<div id="img_id"></div>
<?php 
endif;
endif;
?>

ajax.php

function imgViews(){
    $(".imageView").click(function(){
        var id = $('img_id').text().trim();

        if(id != ""){
             $.ajax({
                    url: 'class/display_image.php',
                    type: 'POST',
                    data: {input: 'input',
                           id:id
                       },
                    success:function(data){
                     $('#imageContainer').html('<img src="'+data+'"/>');
                    },
                    dataType: "text"
            });
        }
    });
  }
  imgViews();

answered Feb 13, 2019 at 7:22

Harry baldaniya

1671 silver badge11 bronze badges

3 Comments

Mohamed-Yousef Over a year ago

So the returned data in your answer will be <div id="img_id"></div> then how can you use .html('<img src="'+data+'"/>');

Harry baldaniya Over a year ago

if your class/display_image.php is index.php then php code will remain same as yours

bastiany Over a year ago

@Harrybaldaniya thanx for a trick. i modify the codes that made the returned data to be <img src='img/<?php echo $image;?>'>

Bash208 · Accepted Answer · 2020-07-29 01:02:14Z

0

Try This

$('#pic').html('"<img src="'+ picURL + data +'"/>');

answered Jul 29, 2020 at 1:02

Bash208

11 bronze badge

Collectives™ on Stack Overflow

how to display image from database using jquery

index.php

ajax.php

displayHere.html

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.php

ajax.php

displayHere.html

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related