Question

我在jquery中得到如下响应。我想通过ajax请求显示来自db的图像。我的控制器代码：

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

我的阿贾克斯：

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附加imagen，例如使用数组的第一个索引：

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

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

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

Answer 2

从您的代码中复制

function imagelide（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");
      }
    }
});

不要忘记在HTML上使用适当的ID

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

Answer 3

在纯粹的js上： Plunker

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

Answer 4

您已在result中收到JSON对象。只需使用

循环它

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

显示来自ajax响应的图像

4 个答案: