简体   繁体   中英

How to display an Image in HTML from javascript's JSON data

I already retrieved data that will be needed from displaying two images in HTML, but my problem is i don't know how to plug the values from JSON data into properly in order to be displayed as a picture. Here's my current progress:

在此处输入图片说明

Here's my snippet code:

<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>

QUESTION

How can i pass the values I retrieved from JSON to img? If the solution I want is not possible? is there any other way I can display the images?

UPDATE

Here's the value that JSON returns from the file Retrieve_Image.php

these are the following values that JSON returns.

  1. Parameter is the Image name
  2. Parameter is the file path and its image name for Original Image
  3. Parameter is the file path and its image name for RGB Image

在此处输入图片说明

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM