javascript - 显示来自 ajax 响应的图像

Question

我在 jquery 中收到如下响应。我想通过ajax请求显示来自数据库的图像。我的 Controller 代码:

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

我的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");
      }
    }
});

我在 Network 中收到的结果选项卡是

[{"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"}]

我不知道如何在浏览器中显示<img>中的图像标签。正如你所看到的，我得到 jpeg在警报窗口中。请帮助我完成......提前致谢!

Answer 1

您可以使用 jQuery 附加图像，例如使用数组的第一个索引:

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

如果要添加每个图像，可以使用 forEach 循环。

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