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.
- Parameter is the Image name
- Parameter is the file path and its image name for Original Image
- 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.