Question

我已经检索了以HTML显示两个图像所需的数据，但是我的问题是我不知道如何正确地将JSON数据中的值插入以显示为图片。这是我当前的进度：

这是我的代码段：

<div class = "modal-body">
        <p>Original Image: <span id = "Orig_Image"></span></p>
        <img src = "Orig_Image" alt="Original Image" height="200" width="200">
        <p>RGB Image: <span id = "RGB_Image"></span></p>
        <img src = "RGB_Image" alt="RGB Image" height="200" width="200">
     </div>

<script>
function showDetails(button){
    var Report_ID = button.id;
    $.ajax({
    url: "Retrieve_Image.php",
    method: "GET",
    data: {"Report_ID": Report_ID},
    success: function(response){
        //alert(response);
        var Images = JSON.parse(response);
        $("#Orig_Image").text(Images.Original_Image_Directory);
        $("#RGB_Image").text(Images.RGB_Image_Directory);
        $("#myModalLabel").text(Images.Image_Name);
    }
});
}
</script>

问题

如何将从JSON检索的值传递给img？如果我想要的解决方案是不可能的？还有其他显示图像的方式吗？

更新

这是JSON从文件Retrieve_Image.php返回的值

这些是JSON返回的以下值。


参数是图片名称

参数是原始图像的文件路径及其图像名称

参数是RGB图像的文件路径及其图像名称

Answer 1

<div class = "modal-body">
        <p>Original Image: <span ></span></p>
        <img src = "Orig_Image" id="Orig_Image" alt="Original Image" height="200" width="200">
        <p>RGB Image: <span ></span></p>
        <img src = "RGB_Image" id="RGB_Image" alt="RGB Image" height="200" width="200">
     </div>

<script>
function showDetails(button){
    var Report_ID = button.id;
    $.ajax({
    url: "Retrieve_Image.php",
    method: "GET",
    data: {"Report_ID": Report_ID},
    success: function(response){
        //alert(response);
        var Images = JSON.parse(response);
        $("#Orig_Image").attr('src',Images.Original_Image_Directory);
        $("#RGB_Image").attr('src',Images.RGB_Image_Directory);
        $("#myModalLabel").text(Images.Image_Name);
    }
});
}
</script>

如何从javascript的JSON数据以HTML显示图像

1 个答案: