Get an image through jQuery AJAX

Question

The following image tag is in my Login Page

<img id="CaptchaImg" alt="Captcha" src="@url.action("Captcha","Login")" style="" />

Now when I refresh my login Page, it works fine, and gets the image from the controller, but when I logOut and the login Page renders .the controller method is not being called.Problem is only in IE works fine on Chrome.Is there are work around? Can I do something with jQuery Ajax call to the controller, I tried this but the success method is not called. Is there any other way?

$.ajax({
    type: "GET",
    url: '/Login/CaptchaImage',
    datatype: "image",
    success: function(data) {
        debugger
        $('#CaptchaImg').attr('src', data);
    }
});

Why are u using `img` src like this `"@url.action("Captcha","Login")"` ? — Imad Alazani, Jun 27 '13 at 10:00

score 13 · Accepted Answer · edited May 19 '20 at 17:47

13

Try this

$.ajax({
    type: "GET",
    url: '@Url.Action("Captcha","Login")',
    dataType:"image/jpg",
    success: function (data) {
        $('#CaptchaImg').attr('src', data);
    }
 });

edited May 19 '20 at 17:47

Vencovsky

28,550
17
109
176

answered Jun 27 '13 at 09:55

Amit

15,217
8
46
68

1

datatype should be `dataType` ? – Imad Alazani Jun 27 '13 at 09:58
url.action should be `Url.Action` ? – Imad Alazani Jun 27 '13 at 10:01
Thanks for the response,Now the control comes to the success function but the format of the data is not proper may be because of wrong data-type.The "Captcha" method returns object of type "FileContentResult".So would "image/jpeg" be right? – Paul Alwin Jun 28 '13 at 06:56
Please check you are returning image in JPG/GIF, if it is JPG then it will run else change datatype as dataType: "image/gif", Reference- http://msankhala.wordpress.com/2012/08/29/loading-image-through-ajax/ http://forums.asp.net/t/1758165.aspx/1 – Amit Jun 28 '13 at 07:00
Minor bug with this - if you're expecting image/jpg back you need to set `contentType: 'image/jpg'` instead – Mark S Feb 18 '16 at 04:15

score 0 · Answer 2 · answered May 04 '16 at 12:26

web Server should return base64 Data. like this

{ base64Data:"blahblahblah" }

your ajax request content-type could be plain json ; in your success function in ajax you could do like this

    success:function(data){
     var src="data:image/png;base64,"+data.base64Data;
      $('#CaptchaImg').attr(src,src)
}

Get an image through jQuery AJAX

2 Answers2

Linked