我已经检索到在 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>
问题
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?
更新
这是 JSON 从文件 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>
关于javascript - 如何从 JavaScript 的 JSON 数据以 HTML 格式显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53098088/