getting image from Drupal and showing in html page using javascript

Question

I am showing image at my html page which is taken from DRUPAL side (by using ajax request)

$.ajax({
        url: URL + AUTH,
        type: 'post',
        data:      addItemObject(validateObject(refreshObject({"_lawyer_id":"462"})),'key','lawyerlogo'),
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            devconsole(errorThrown);
            navigator.notification.alert('Error saving data.  Please try again.', null, 'Server     Error', 'Ok');
        },
        success: function (data) {
        myalert(JSON.stringify(data["url_full"]));

        document.getElementById("lawyer_logo").src=data["url_full_mobile"];
    }
});

I am getting the Image URL in this format

http://URL/sites/default/files/styles/thumbnail/public/Jellyfish.jpg?itok=W2h3AytQ

I am removing the "?itok=W2h3AytQ" from URL and assigning to 'src' but it is not showing the image how could i show the image.

Answer 1

The image URL is generated by Drupal's image module, picking up the original uploaded image and generating a new one, resizing the original according to the 'image style' selected. The "itok" query parameter has been introduced in version 7.20 to prevent random generation of new images (and blocking potential DOS attacks). https://www.drupal.org/drupal-7.20-release-notes

Not too sure what your setup is, but probably the quickest way of getting the image would be to access the original and resizing it in CSS. The original image URL would be:

http://URL/sites/default/files/Jellyfish.jpg

(note how you just need to remove styles/thumbnail/public and the token at the end)