Как отобразить изображение в HTML из данных JSON Javascript - PullRequest
0 голосов
/ 01 ноября 2018

Я уже получил данные, которые понадобятся при отображении двух изображений в HTML, но моя проблема в том, что я не знаю, как правильно подключить значения из данных JSON, чтобы они отображались как изображения. Вот мой текущий прогресс:

enter image description here

Вот мой фрагмент кода:

<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? Если решение, которое я хочу, не возможно? Есть ли другой способ отображения изображений?

UPDATE

Вот значение, которое JSON возвращает из файла Retrieve_Image.php

это следующие значения, которые возвращает JSON.

  1. Параметр - имя изображения
  2. Параметр - путь к файлу и имя его изображения для исходного изображения
  3. Параметр - путь к файлу и его имя для изображения RGB.

enter image description here

1 Ответ

0 голосов
/ 01 ноября 2018
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...