Dynamically Change Image Src Using Jquery Not Working In Ie And Firefox

I am implementing a captcha for a email. when click on linkEmail button email modal will open. there i have to set captcha image generated by a handler (CaptchaGenerator.ashx) on c

Solution 1:

IE caching all GET request, so add a timestamp to your request URL e.g :

$(".linkEmail").click(function () {
   //Load captcha image
   $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx?'+newDate().getTime());
   $('#emailModal').modal();
});

Solution 2:

Have you tried setting the src attribute to '' before changing it again? Also, what are the caching settings you are using (both locally, and on the server)

Solution 3:

If you specify any inline style attribute, Height or Width like,

<imgsrc="themes/images/01.png"height="100"width="100" /><imgsrc="themes/images/01.png"style="height:100px; width=100px;" />

then first remove it and try again.

Even if you externally specify style using style tag,

#imageId{
    height : 100px;
    width : 100px;
  }

then also first remove it and try. After you remove the style attribute from the images, it will display image.

Height attribute is may work with IE but width attribute not working.

If the above solution doesn't work, then : Sometime PNG files are not displaying as well. So try to use their JPG image.

Solution 4:

I had the same problem when trying to call re captcha button. After some searching, now function works fine in almost all the famous browsers(chrome,Firefox,IE,Edge,...):

functionrecaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  document.getElementById("captcha-img").src = "";
  setTimeout(function(){
    document.getElementById("captcha-img").src = "captcha?"+newDate().getTime();
  }, 0);
}

'theUrl' is used to render new captcha image and can be ignored in your case. The most important point is generating new URL which forces FF and IE to rerender the image.