how to display image filepath from database to image src using jquery ajax

Question

i have a btn-edit when i click it modal window show's up then i use ajax to make request then display my request on the input tag of html..

$('#btn-edit_profile').click(function(){
 $('#modal-update_profile').modal({backdrop: 'static', keyboard: true});


    $.ajax({
            url:'../ajax/getprofile.php',
            type:'POST',
            data:{userid:user},
            dataType:'JSON',
            success: function(result){
            $('#profile_image').attr('src','data:image/png;base64,'+result.profile_image+'"/>');    
            $('#users_firstname').val(result.users_firstname);
            }
    });
});

but the problem i encountered here is that on the input tag it works fine but on the image src its not..for some reason i got this error on my console..data:image/png;base64,../img/doc/ui-sam.jpg net::ERR_INVALID_URL

what is the correct approach to display the filepath to src??

the file path of on my image from my database is ../img/doc/ui-sam.jpg and the return JSON profile_image: "../assets/img/doctors/ui-sam.jpg"

and this is where i want the image from my db to be displayed <img class="img-responsive" id="profile_image" name="profile_image" src=""/>

Why are you adding the base64 bit to your src? That is going to expect the rest of that to be a base64 string. Just delete that 'data:image/png;basae64' bit and it should work fine. — Rick Calder
– Rick Calder, Commented May 16, 2017 at 3:35
i added tat base64 cuz that is the approach i saw when they display the filepath to src. — Lion Smith
– Lion Smith, Commented May 16, 2017 at 3:42
That would only be if you weren't returning an actual path, but rather a base64 encoded image. See my answer, that should give the results you want. — Rick Calder
– Rick Calder, Commented May 16, 2017 at 3:50

Rick Calder · Accepted Answer · 2017-05-16 03:36:14Z

2

$('#btn-edit_profile').click(function(){
 $('#modal-update_profile').modal({backdrop: 'static', keyboard: true});


    $.ajax({
            url:'../ajax/getprofile.php',
            type:'POST',
            data:{userid:user},
            dataType:'JSON',
            success: function(result){
            $('#profile_image').attr('src',result.profile_image);    
            $('#users_firstname').val(result.users_firstname);
            }
    });
});

You're returning a URL for the image, that is all the src attribute needs.

answered May 16, 2017 at 3:36

Rick Calder

18.8k3 gold badges27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndrewR Over a year ago

This is correct. You have a URL, so that's what the src attribute should be set to. Keep in mind though that you are currently returning a relative path. That path is relative to the current page address. What you have may work, but if the image src looks correct and it's not working, look at the path and possibly switch it to an absolute path.

Collectives™ on Stack Overflow

how to display image filepath from database to image src using jquery ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related