How to load a image file into JQuery?

Question

I was retrieving an image from parse using a url, like this

var imgPaht = user.get("ProfilePic");

    $('<img src="' + imgPaht + '">').load(function() {
        $(this).width(400).height(400).appendTo('#profile_pic');
    })

Now in parse, the image is not held as a string, its held as a file. How do I change the above line to work with a file and not a url.

I've tried

var profilePhoto = profile.get("ProfilePic");
$("profileImg")[0].src = profilePhoto.url();

Error I'm getting

Answer 1

Encoded image file data will not insert directly into an img tags src property. It must be decoded first into raw image data and then assigned to the src property prefixed with data:.

See Using raw image data from ajax request for data URI for more information on how to do this.