2

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:

enter image description here

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

enter image description here

Improve this question
7
  • Is Images a json array? What src do the images have after the ajax call? Commented Nov 1, 2018 at 9:09
  • $("#RGB_Image").parent().siblings('img').attr('src', Images.RGB_Image_Directory); Commented Nov 1, 2018 at 9:10
  • You should return Image byte data into Base64 in json and then using <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" /> Commented Nov 1, 2018 at 9:17
  • @ImAtWar it's not array Commented Nov 1, 2018 at 9:21
  • 1
    @Denzell can you add the object in your post, you got in your response? Commented Nov 1, 2018 at 9:53

1 Answer 1

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

same ids are invalid markup. Could create issues.
still didn't work , what's the difference between src and id in your code?
@Denzell in an <img tag the "src" attribute is the one which should contain the URL to the image. That's the bit you need to populate with your data. That is what this example is doing. The problem might come if what's in your JSON is not a valid URL (either relative or absolute), or is not the correct URL to the image file. If you still have an issue might be sensible if you edit the question to show us your JSON data. Also, when running this code, watch your browser's Network tools - you should see HTTP requests to fetch the images going out, and see if they succeed
Suresh, your code is fine but you should be explaining what you are changing, and why, since it may not be obvious to everyone. Code without explanation doesn't help anyone to learn.
@ADyson yes i know, but how do i plus the values i retrieve from JSON into the <img src> ? i tried suresh's code but still didn't work. I already tried to print the values in text form and no problem. the only problem i want to fix is to plug it in the src of img in order to display it as an image.
|