背景画像がjavascriptから変更されない

Question

私は画像処理に関連するプロジェクトに取り組んでいます。現在、私はウェブカメラから画像を取得して、それをいくつかのフォルダに保存しています。次に、そのイメージを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") 

Answer 1

UPDATE 2 - 詳細情報およびそのacheiveするためのより良い方法のため、この質問をチェック：Refresh image with a new one at the same url

UPDATE： 何を私はキャッシュと関係があると思ったので、新しい名前で画像を保存し、更新されたURLを前面に送りましたが、なぜ0123を追加するのか分かりませんは役に立たなかった。

ブラウザのキャッシュと関係があると思われます。

イメージのURLにタイムスタンプまたはその他の番号を追加してください。毎回新しいイメージを読み込むようにしてください。

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

あなたはより多くを読むことができます：how to clear or replace a cached image

Answer 2

は、キャッシュをクリアするためにこれを試してみてください：

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