Question

我想使用Ajax在“ img”标签中显示数据库中的图像。

 <div class="col-md-3">
    <div class="form-group">
       <label for="EditcontactNoSelector">Employee Picture</label>
         <img src="" id="EditImage" alt="Not Found">
    </div>
 </div>

这是转到“ master_get_employees”并选择图像的Ajax代码数据库的路径。现在我不知道如何在“图像”标签中显示该图像？

 $(".Edit-modal").on("shown.bs.modal", function (e) {
           var button = $(e.relatedTarget); // Button that triggered the modal
           var ID = button.parents("tr").attr("data-id");
           var modal = $(this);
           console.log(ID);
           $.ajax({
              url: "'.base_url().'Employees/master_get_employees",
              data: {ID:ID},
              type: "POST",
              success:function(output){
                try{
                   modal.find("input#EditImage").val(outputData.pic);
             enabled=outputData.IsEnabled;
                        if(enabled=="1")
                        {
                        modal.find("#editIsEnabled").prop("checked",true);
                        }else if(enabled=="0"){
                        modal.find("#editIsEnabled").prop("checked",false);
                        }
                }
                catch(ex){
                    var split = output.split("::");
                    if(split[0] === "FAIL"){
                        Shafiq.notification(split[1],split[2])
                    }else{
                        Shafiq.notification("Could Not Load Data, Please Contact System Administrator For Further Assistance","error");
                    }
                }
              }
           });
    });

这是“ master_get_employees”函数，其中接受Ajax请求并从数据库中检索数据。

function master_get_employees()
    {
        if ($this->input->post()) { //If Any Values Posted
            if ($this->input->is_ajax_request()) { //If Request Generated From Ajax
                $ID = $this->input->post('ID');
                if (!isset($ID) || !is_numeric($ID)) {
                    echo "FAIL::Something went wrong with POST request, Please contact system administrator for further assistance::error";
                    return;
                }
                $table = "employees e";
                $selectData = "e.id AS e.Picture as pic";
                $joins=array(
                    array(
                        "table"=>'designation d',
                        "condition"=>'d.id=e.Designation',
                        "type"=>'left',

                    ), array(
                        "table"=>'shifts s',
                        "condition"=>'s.id=e.shift',
                        "type"=>'left',

                    ));
                $where = array(
                    'e.id' => $ID, 'e.IsActive' => 1
                );
                $result = $this->Common_model->select_fields_where_like_join($table, $selectData,$joins, $where, TRUE);
                print json_encode($result);
            }
        }
    }

Answer 1

在成功执行ajax调用时，可以使用以下命令显示图像

function (element) {
    let li = element.parentElement;
    let ul = li.parentNode;   
    if (li.nextSibling.nodeName === 'LI') {
        let li_replaced = ul.replaceChild(li, li.nextSibling);
        ul.insertBefore(li_replaced, li);
    }
}

Answer 2

您可以使用base64 image uri实现此目的。请参考https://css-tricks.com/data-uris/以获取更多信息

Answer 3

更改此行

modal.find("input#EditImage").val(outputData.pic);

到

$("#EditImage").src('data:image/png;base64,'+outputData.pic);

更新

如果您的数据存储为二进制Blob，那么您可能应该首先对其进行base64编码。

 $result['pic'] = 'data: '.mime_content_type($result['pic']).';base64,'base64_encode($result['pic']);

然后您需要做的就是将其放在图片标签的src中。

假设pic项目是base64编码的图像数据，并且图像是png。

如何在Codeigniter中使用Ajax从数据库显示图像

3 个答案: