如何使用jquery从数据库中显示图像答案

【问题标题】：how to display image from database using jquery如何使用jquery从数据库中显示图像
【发布时间】：2019-02-13 07:11:40
【问题描述】：

我在使用 jquery 显示图像时遇到问题。图像是从数据库中检索的，我想使用 jquery 显示它。以下是我的代码

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>

【问题讨论】：

只需从服务器发送带有 src 的整个图像标签，并将 .html() 发送到 div。
@DevsiOdedra，请将您的答案作为答案而不是评论分享。
@dmh 给出的答案也是做同样的事情，所以 OP 可以使用它。
抱歉@DevsiOdedra，当我添加评论时（来自分类），我看不到这一点。

标签： php jquery mysqli

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

希望对你有帮助

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

【讨论】：

【解决方案3】：

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();

【讨论】：

所以你的答案中返回的数据将是<div id="img_id"></div>那么你怎么能使用.html('<img src="'+data+'"/>');
如果你的 class/display_image.php 是 index.php 那么 php 代码将和你的一样
@Harrybaldaniya 感谢一个技巧。我将返回数据的代码修改为<img src='img/<?php echo $image;?>'>

【解决方案4】：

试试这个

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

【讨论】：