How to show image from database using ajax in Codeigniter

Question

I want To display Image from database in "img" Tag Using Ajax.

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

This is the Ajax Code Which goes to "master_get_employees" and select the image path from the database. Now i don't know how to Display That image in "Img" tag?

 $(".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");
                    }
                }
              }
           });
    });

And Here is the "master_get_employees" function Where the Ajax request is accepted and the data is retrieved from database.

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);
            }
        }
    }

are the image data stored in the DB? what is `$result ` in other words. You'll probably have to create an image tag with base64 data as the source. see https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html — ArtisticPhoenix, Oct 01 '18 at 06:19

score 0 · Answer 1 · answered Oct 01 '18 at 06:22

0

You can show the image by using the following in the success of ajax call

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

answered Oct 01 '18 at 06:22

AliRazaGhori

13
2

score 0 · Answer 2 · answered Oct 01 '18 at 06:27

0

You can use base64 image uri to achieve this. Kindly refer https://css-tricks.com/data-uris/ for more information

answered Oct 01 '18 at 06:27

Daulatkhan Syed Ibrahim

11
3

ArtisticPhoenix · Answer 3 · 2018-10-01T16:23:45.797

-1

Change this line

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

to

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

UPDATE

If your data is stored as a binary blob, then you probably should base64 encode it first.

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

Then all you need to do is put it in the src of the image tag.

Assuming the pic item is base64 encoded image data, and the image is a png.

edited Oct 01 '18 at 16:23

answered Oct 01 '18 at 06:22

ArtisticPhoenix

21,464
2
24
38

Well it will work if the assumptions I put in the answer are met. Because that is how it works for raw image data. Also note there are 2 other answers that say the same thing (more or less) even though my answer is better. :) Because as I said, that is how it works when dealing with raw image data. – ArtisticPhoenix Oct 01 '18 at 16:11
Now rather or not your image data is already base64 encoded or stored as a binary blob, I have no way to know. Also I have no way to know what the mime type of the image is. For example if you just put a binary blob data in there, well it should be obvious that is binary and not base64 encoded. Same for the mine type, if you have `.gif` and you header it as a `.png` well ... expect issues. – ArtisticPhoenix Oct 01 '18 at 16:15

How to show image from database using ajax in Codeigniter

3 Answers3