如何从javascript'；s JSON数据

我已经从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>

原始图像：

RGB图像：

功能显示详细信息（按钮）{
var报告_ID=button.ID；
$.ajax({
url:“检索_Image.php”，
方法：“获取”，
数据：{“报告ID”：报告ID}，
成功：功能（响应）{
//警报（响应）；
var Images=JSON.parse（响应）；
$（“#Orig_Image”）.text（Images.Original_Image_目录）；
$（“#RGB_Image”）.text（Images.RGB_Image_目录）；
$（“#myModalLabel”）.text（Images.Image_Name）；
}
});
}

问题

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

更新

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

以下是JSON返回的值

参数是图像名称

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

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

原始图像：

RGB图像：

功能显示详细信息（按钮）{
var报告_ID=button.ID；
$.ajax({
url:“检索_Image.php”，
方法：“获取”，
数据：{“报告ID”：报告ID}，
成功：功能（响应）{
//警报（响应）；
var Images=JSON.parse（响应）；
$（“#Orig_Image”）.attr（'src'，Images.Original_Image_目录）；
$（“#RGB_Image”）.attr（'src'，Images.RGB_Image_目录）；
$（“#myModalLabel”）.text（Images.Image_Name）；
}
});
}

图像是json数组吗？在ajax调用之后，映像有什么src？

$（“#RGB_映像”）.parent（）.sibbins（'img'）.attr（'src'，images.RGB_映像_目录）

您应该将图像字节数据返回到json中的Base64中，然后使用@ImAtWar返回array@Denzell你能在你的帖子中添加你在回复中得到的对象吗？相同的

id

s是无效的标记。可能会产生问题。仍然不起作用，代码中的src和id之间有什么区别？@Denzell在

Suresh中，您的代码很好，但您应该解释您正在更改的内容以及原因，因为这可能不是每个人都能看到的。没有解释的代码对任何人的学习都没有帮助。@ADyson是的，我知道，但是我如何将从JSON检索到的值加在一起呢？我尝试了suresh的代码，但仍然不起作用。我已经尝试以文本形式打印这些值，没有问题。我想解决的唯一问题是将其插入img的src中，以便将其显示为图像。
<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>