Using Ajax/Jquery to Refresh an Image

How to reload an image using ajax

You need to reload your image with a unique query string attached to it, in order to prevent your browser from caching the image. The easiest way is to just append the current time. Since you are already using jQuery, here's one way you can do it.

var unique = $.now();
$('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + unique);

However, some people may recommend against this solution as it can fill up your cache. Although the alternative will require that you send cache control headers.

Using AJAX / jQuery to refresh an image

$(document).ready(function() {
    var $img = $('#image1');
    setInterval(function() {
        $.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
            var $loader = $(document.createElement('img'));
            $loader.one('load', function() {
                $img.attr('src', $loader.attr('src'));
            });
            $loader.attr('src', data);
            if($loader.complete) {
                $loader.trigger('load');
            }
        });
    }, 5000);
});

Untested. Code above should load the new image in the background and then set the src attribute of the old image on load.

The event handler for load will be executed only once. The .complete check is necessary for browsers that may have cached the image to be loaded. In such cases, these browsers may or may not trigger the load event.

update image after ajax call

Do you mean that the image has changed server-side and you just want to force the img tag to fetch the new state of the image? Simply setting the src should accomplish that:

success: function(data) {
    // which is your image?  "slika2"?
    // it's not really obvious, so I'll assume that for now
    $(slika2).attr('src', slika);
}

If this isn't refreshing the image, you might add a "cache-breaker" to force it to re-request. Something as simple as this:

success: function(data) {
    $(slika2).attr('src', slika + '?' + new Date().getTime());
}

This wouldn't affect anything, it would just innocuously change the URL and force the browser to re-request from the server.

How to use AJAX call to refresh img src

There are multiple ways this could be achieved.

The simplest might be to create an instance of Image, assign the responseText to the src property of the image, set the style property accordingly, and then set the innerHTML of the element with id value picFrame to the outerHTML of the image.

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var image = new Image();
        image.src= this.responseText;
        image.style = "width:304px;height:228px;";
        document.getElementById("picFrame").innerHTML = image.outerHTML;
    }
}

See it demonstrated in this phpfiddle.

Otherwise the <img> tag that is currently commented out could be used if the id attribute was changed or if it was accessed via the DOM as a child of the paragraph element. Though if the initial value of the src property is empty or an invalid URL for an image, then the browser might display a broken image icon.

So the image could be updated like this:

<p id="picFrame">
    <img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
</p>

And then accessed via Javascript:

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    document.getElementById('picFrameImg').src = this.responseText;
}

See a demonstration of this below. Hopefully the AJAX still works in the long term, though it might not, given the phpfiddle code files. If it stops working, this plunker might be a good demonstration but bear in mind that picQuery.php is NOT being executed as a regular PHP file.

function getPic() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("picFrameImg").src = this.responseText;
    }
  };
  xhttp.open("GET", "http://main.xfiddle.com/code_65644594.php?q=4", true);
  xhttp.send();   
}

<form action="">
  <button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame">
  <img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="" />
</p>

image feed refresh with jQuery/ajax

I couldn't find a webcam online with a refreshing image to test this against, but I think this should to the trick for you... or at least get you really close...

<script>
// URL to your cam image
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg';

var buffer = {};
function preload() {
    buffer = new Image();
    // attaching the seconds breaks cache
    buffer.src = cam_image + '?' + (new Date()).getTime();
    buffer.onload = function() {
        setTimeout(preload, 30000); // 30 seconds refresh
        document.getElementById('myimg').src = buffer.src;
    }
}
preload();
</script>

How to refresh DIV with AJAX when image is replaced?

First on all, the method refresh() wasn't invoked anywhere in your snippet, so you need to call it first.

Second, it's best practice to use setInterval Instead of setTimeout

There is no need to recall refresh() method in setTimeout as it will re attach setTimeout method every time it calls it-self, although it doesn't harm you programmer but if you want to call a piece of program every second then you should go for setInterval

Also I have bit simplified your code.

function refresh() {  setInterval(function() {    var timestamp = new Date().getTime();    var newImage = 'https://picsum.photos/200?timestamp=' + new Date().getTime();    $('#artwork').attr('src', newImage);  }, 2000);}refresh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="auto">  <img id="artwork" src="https://picsum.photos/200"></div>

Is there a way to refresh an image after an ajax file upload in jQuery?

The article you linked isn't working here, but you can break the cache with a query string on the image, like this:

$("#profilePicForm").ajaxForm(function() { 
  alert("Photo updated");
  $("#newPhotoForm").slideToggle();
  $("#profilePic img").load(function() {
    $(this).hide();
    $(this).fadeIn('slow');
  }).attr('src', '/Content/UsrImg/Profiles/PhotoName.jpg?' + new Date().getTime());
});

This forces the browser to check for the image again, since the timestamp is being adding to the query string, it's different every time. This means the browser just can't trust the cache anymore, since that's a slightly different server request...so it'll result in a re-fetch like you want.

How to reload/refresh an element(image) in jQuery

It sounds like it's your browser caching the image (which I now notice you wrote in your question). You can force the browser to reload the image by passing an extra variable like so:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());