如何在 Codeigniter 中使用 ajax 显示数据库中的图像

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>

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

$(".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 调用成功中显示图像

$("#EditImage").attr('src', outputData.pic);

Answer 2

您可以使用 base64 图像 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。