Background image not changing from javascript

Question

I am working on a project related to image processing. Currently, I am taking a image from the webcam and saving it in some folder. Then I display that image as a background image on the div. This works fine. But when I take the image again, the background image still remains the same. But when I see the image in the folder, it has changed.

Note: Both the images are saved by same name. So, previous image is just replaced by current image. And the image is taken by clicking a button.

html code:

 <button id = "click" onclick = "mooddetect()">MOODY</button>
     function mooddetect() {
            $.ajax({
            url: '/mooddetect/',
            type:"POST",
            cache:false,
            success: function(input) {
                var x = document.getElementById('photo');
                x.style.backgroundImage = "url('/static/detect/test.jpg')";
            },
            failure: function(data) { 
                alert('Got an error dude');
            }
        }); 
        }

views.py:

def get_image(camera):
    retval, im = camera.read()
    return im

def webcam():
    camera_port = 0
    ramp_frames = 30
    camera = cv2.VideoCapture(camera_port)
    for i in xrange(ramp_frames):
        temp = get_image(camera)
    print("Taking image...")
    camera_capture = get_image(camera)
    file = "./music/static/detect/test.jpg"
    cv2.imwrite(file, camera_capture)
    del(camera)
@csrf_exempt
def mooddetect(request):
    webcam()
    return HttpResponse("success")

I think the problem is, that the image name dont change (so no refresh). Try to change the background image to a dummy pic (other name) and change it back to the new image (old name). — Cracker0dks, Nov 28 '16 at 10:50

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

UPDATE 2 - check this question for more info and better ways to acheive that: Refresh image with a new one at the same url

UPDATE: What helped was saving the images with a new name and send the updated url to the front, as i assumed it have to do with cache, but im not sure why adding ?c=rand didn't helped.

I assume it will have to do with the cache of the browser.

Try to add timestamp or other rand number to the image url, so you will force to load the new image every time.

x.style.backgroundImage = "url('/static/detect/test.jpg?c=|some random number|')";

you can read more: how to clear or replace a cached image

edited May 23 '17 at 11:52

Community

1
1

answered Nov 28 '16 at 10:54

Yan Mayatskiy

353
3
12

@ShivamMitra - have you tried to open the browser and see the image live? open the url and check if the images changed. – Yan Mayatskiy Nov 28 '16 at 11:15
@ShivamMitra - try to click 3 times on the button (with few seconds between them) do the background change to the second image? after the third click? – Yan Mayatskiy Nov 28 '16 at 11:16
The image changes in the browser url but it doesn't change in the background. – Shivam Mitra Nov 28 '16 at 11:21
Have you tried saving the file on different name? you can send the url to the front in the response `return HttpResponse(|the_url|)`. because the code is right and should work. – Yan Mayatskiy Nov 28 '16 at 12:02
Finally I gave different names to images. – Shivam Mitra Nov 28 '16 at 13:53
so it was a problem with the cache, finally it worked :D. – Yan Mayatskiy Nov 28 '16 at 14:17
1

http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url?noredirect=1&lq=1 – Shivam Mitra Nov 28 '16 at 19:57

Ma Ni Sh · Answer 2 · 2016-12-08T11:30:47.340

-1

Try this to clear the cache:

x.style.backgroundImage = `url('/static/detect/test.jpg?${Date.now()}')`

edited Dec 08 '16 at 11:30

answered Nov 28 '16 at 10:58

Ma Ni Sh

1
1

Background image not changing from javascript

2 Answers2