背景图像不从javascript更改答案

【问题标题】：Background image not changing from javascript背景图像不从javascript更改
【发布时间】：2017-04-12 01:27:54
【问题描述】：

我正在从事与图像处理相关的项目。目前，我正在从网络摄像头拍摄图像并将其保存在某个文件夹中。然后我将该图像显示为 div 上的背景图像。这工作正常。但是当我再次拍摄图像时，背景图像仍然保持不变。但是当我看到文件夹中的图像时，它已经改变了。

注意：两个图像都以相同的名称保存。因此，以前的图像只是被当前图像替换。并通过单击按钮拍摄图像。

html代码：

 <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")

【问题讨论】：

我认为问题在于，图像名称没有改变（所以没有刷新）。尝试将背景图像更改为虚拟图片（其他名称）并将其更改回新图像（旧名称）。

标签： javascript django

【解决方案1】：

更新 2 - 检查此问题以获取更多信息和更好的实现方法：Refresh image with a new one at the same url

更新：有用的是用新名称保存图像并将更新的 url 发送到前面，因为我认为它与缓存有关，但我不确定为什么添加 ?c=rand 没有帮助。

我认为这与浏览器的缓存有关。

尝试在图片url中添加时间戳或其他数字，这样你每次都会强制加载新图片。

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

您可以阅读更多：how to clear or replace a cached image

【讨论】：

@ShivamMitra - 您是否尝试打开浏览器并实时查看图像？打开网址并检查图像是否更改。
@ShivamMitra - 尝试在按钮上单击 3 次（它们之间有几秒钟）背景是否会变为第二张图像？第三次点击后？
图片在浏览器url中发生变化，但在后台没有变化。
你试过用不同的名字保存文件吗？您可以在回复return HttpResponse(|the_url|) 中将网址发送到前面。因为代码是正确的，应该可以工作。
stackoverflow.com/questions/1077041/…

【解决方案2】：

试试这个清除缓存：

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

【讨论】：