show image from ajax response

Question

I am getting response in jquery as below. I want to show images from the db through the ajax request. My controller code :

public function images($id='')
    {           
        $this->load->model('gallery');
        $data = this->gallery_model->getimages($this->input->post('id')); 
        echo json_encode($data);
    }

My ajax :

function imageslide(folderid){

$.ajax({
    url: "<?php echo site_url() ?>/welcome/images",
    type: "POST",
    dataType: "json",
    data: {id: folderid},
    success: function(result) {
      if(result){
        resultObj = eval (result);
        alert(JSON.stringify(resultObj));
      }else{
        alert("error");
      }
    }
});

The result which i received in the Network tab is

[{"id":"153","file_name":"DSC00081.JPG","created":"2017-05-23 09:36:32","modified":"2017-05-23 09:36:32","status":null,"folder_id":"50"},{"id":"154","file_name":"DSC00082.JPG","created":"2017-05-23 09:36:32","modified":"2017-05-23 09:36:32","status":null,"folder_id":"50"},{"id":"155","file_name":"DSC00083.JPG","created":"2017-05-23 09:36:32","modified":"2017-05-23 09:36:32","status":null,"folder_id":"50"}]

I do not know how to show image in the browser in the <img> tag. As you can see, I am getting jpeg in the alert window. Kindly help me through.. Thanks in Advance!

You are just getting the file_name of image instead of the image code, you will either need to store the image code into blob format inside the database field and retrieve and generate back image, or you will need to store image on logical path and generate path to retrieve the image from that path. — Chintan Thummar, May 23 '17 at 09:46
fyi `eval(result);` is pointless, if you're returning a JSON object you shouldn't have to do anything to it as valid JSON is also valid as a JS object. If you're getting a string use `JSON.parse()` instead. — George, May 23 '17 at 09:46

score 1 · Accepted Answer · edited May 23 '17 at 09:49

1

You can append the imagen using jQuery, for example with the first index of array:

$('#container').append('<img src="' + result[0].file_name + '" />');

If you want to add each image, you can use forEach loop.

result.forEach(function (image) {
    $('#container').append('<img src="' + image.file_name + '" />');
});

edited May 23 '17 at 09:49

George

6,630
2
29
36

answered May 23 '17 at 09:47

Diego

26
2

No, only need to have an container (for example a div) to append the content – Diego May 23 '17 at 09:55
i kept the code inside the success function of my ajax, it didnot worked for me..and also created a div with id='container' – Peniyal Abraham May 23 '17 at 10:03
Perez Gonda, Sorry i made a mistake in the div. I corrected and it worked with the following error GET http://localhost/ins/index.php/welcome/DSC00081.JPG 404 (Not Found) – Peniyal Abraham May 23 '17 at 10:12
Please check if the image exists, or it have the correct permissions – Diego May 23 '17 at 10:31

score 0 · Answer 2 · answered May 23 '17 at 09:48

Copying from your code

function imageslide(folderid){

$.ajax({
    url: "<?php echo site_url() ?>/welcome/images",
    type: "POST",
    dataType: "json",
    data: {id: folderid},
    success: function(result) {
      if(result){
        resultObj = eval (result);
        var HTMLbuilder = "";
        for(var i = 0; i < resultObj.length; i++){
            var imgHtml = "<img src='path-toImage/" + resultObj[i].file_name + "'>";
            HTMLbuilder = HTMLbuilder + imgHtml;
        }
        $("#imgContainer").html(HTMLbuilder);
      }else{
        alert("error");
      }
    }
});

Don't forget to have the div with the appropriate ID on the HTML

<div id="imgContainer"></div>

I worked with the help of your code, I get the following,`DSC00082.JPG:1 GET http://localhost/ins/index.php/welcome/path-toImage/DSC00082.JPG 404 (Not Found)` — Peniyal Abraham, May 23 '17 at 10:07
@PeniyalAbraham you need to check the actual path to your image. Replace the "path-toImage" in the code to the relative path of the image — Taufik Akbar, May 23 '17 at 10:10

score 0 · Answer 3 · answered May 23 '17 at 10:03

0

On pure js: Plunker

result.forEach(img => {
      let element = document.createElement('img');
      element.width = '100'
      element.src = img.path;
      parentEl.appendChild(element)
    })

answered May 23 '17 at 10:03

Alex Lyalka

1,484
8
13

score -1 · Answer 4 · answered May 23 '17 at 09:46

-1

You have received JSON object in result. Just loop through it, using

$.each(result, function(key, value){ $('#container').append('<img src=" +value.file_name + " />'); })

answered May 23 '17 at 09:46

Milan Chheda

8,159
3
20
35

show image from ajax response

4 Answers4