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=""/>

Answer 1

$('#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.