I am attempting to use Ajax to dynamically add an <img> element to a div on my webpage. The image's name needs to be fetched from a database.
Although I have successfully added the <img> tag to the div and set the correct source (src) attribute for the image, I am unable to see the image itself. Instead, I only see an <img> tag with dimensions of 0 x 0 pixels. Even after adjusting the size, the image remains invisible.
When I manually access the image via the link generated in the src attribute, I am able to view the desired image. Why is this happening?
Below is the code snippet:
Trigger function for Ajax:
<div class="HotelListDescriptionContent" onclick='showDetailRoom("<?php echo $arrayroomssearch[$arrk]['room_code']?>")'>
AJAX Function:
function showDetailRoom(roomid)
{
if(j("#detailroom"+roomid).is(":visible"))
j("#detailroom"+roomid).hide();
else
{
j.post("inc/querys/roomdetail.php",
{
roomid : roomid,
},
function(data){
// console.log(data);
j("#detailroom"+roomid).html("");
if(data == "empty")
{
j("#detailroom"+roomid).append($("<option></option>").append("State Not Found..."));
}
else
{
j(data.photo).each(function(i,item){
j("#detailroom"+roomid).html("<img scr='<?php echo SITE_URL;?>upload_photos/images/"+item+"'/>");
})
}
j("#detailroom"+roomid).show();
},
"json");
}
}
Target div:
<div id="detailroom<?php echo $arrayroomssearch[$arrk]['room_code'];?>" style="display:none;">
Expected output in target div (from Inspect Element):
<div id="detailroom20" style=""><img scr="http://localhost/bookingbeol/bk-admin/upload_photos/images/kamar3-1476346812.jpg"></div>
The target div is not displaying the image as intended.
https://i.sstatic.net/mG9FD.png