Images from database is not showing up in my HTML using Ajax and SQL

Question

I need helps to retrieve my images that are uploaded to my database to show up in my HTML. It would be appreciated if anyone could help me.

Here is my Ajax code.

$(document).ready(function() {
    $.ajax({
        url:"../controller/image.php",
        dataType:"json",
        type:"POST",
        data:{
            method:"getall"
        },
        success: function(resp) {
            console.log(resp);
            for(var i = 0; i<resp.length; i++){
                var img = document.createElement("img");
                var div = document.createElement("div");
                var h = document.createElement("h4");
                img.innerHTML = img.src + ":"+resp[i].title;
                img.onclick = function() {
                    console.log(resp);     
                }
            }
        }
    });
});

Here is my PHP code.

function getall() {
    global $db;
    $query = "SELECT * FROM images";
    $result = $db->query($query);
    $row = $result->fetchAll();
    echo json_encode($row);
}

I have my images loaded to my database and I can see that they are their with the console.. but not being able to see them. Thank you.

img.innerHTML = img.src + ":"+resp[i].title; i also know that part of this line is wrong , but I dont think this line is the issue unless it is and I'm missing something — Katie Sak, Mar 31 '16 at 06:32

score 0 · Answer 1 · answered Mar 31 '16 at 06:41

0

Try This its jquery way to append Images in your for loop

$('id').append('<img id="image" src="+resp[i].image+" />')

or if still facing issue than check your image path

answered Mar 31 '16 at 06:41

uzaif

3,319
2
17
30

score 0 · Answer 2 · edited May 23 '17 at 12:15

You have to use base64 encoded image data to do that. Example you can find in question How to display base64 images in HTML. For convenience here is an example:

$(document).ready(function() {
$.ajax({
    url:"../controller/image.php",
    dataType:"json",
    type:"POST",
    data:{
        method:"getall"
    },
    success: function(resp) {
        for(var i = 0; i<resp.length; i++){
            var img = document.createElement('img');
            img.src = "data:image/png;base64," + resp[i].data;
            document.body.appendChild(img);
        }
    }
});

});

where data should be base64 encoded image content like:

'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

thank you, but what I have going here is a image uploader with a separate page showing all the uploaded photos from whomever logs in and uploads a picture, so I'm unsure how to make sure these images are base64 encoded when a user inserts a path — Katie Sak, Mar 31 '16 at 07:15

score 0 · Accepted Answer · answered Mar 31 '16 at 07:52

Due to your new comment i have another answer:

don't user innerHTML property of an image. This is wrong.
```
img.innerHTML = img.src + ":"+resp[i].title;
```
instead you have to fill the src property:
```
img.src = resp[i].link
```
there is no insertion to page in your code. Creating element (e.g. document.createElement) doesn't insert it into page, but only creates it in memory. To display created images you have to add them to any page element. Fro example to page body:
```
document.body.appendChild(img)
```
or any other element, by selecting it:
```
document.getElementById('imagesWrapper').appendChild(img)
```
All the code assumes that images are uploaded to your server correctly and their relative path's are store in database field link

Images from database is not showing up in my HTML using Ajax and SQL

3 Answers3