Как загрузить изображения с помощью JavaScript в Django в формате Jinja?

По сути, я делаю следующее: есть модель обнаружения эмоций, работающая в фоновом режиме, которая определяет эмоцию и создает эмодзи в формате .svg. Этот файл svg продолжает меняться по мере изменения эмоции. Например, если эмоция="Happy", то изображение со счастливым лицом будет сгенерировано в формате svg. Теперь я хочу, чтобы это сгенерированное изображение было отображено в шаблоне Django, но получаю ошибку.

Это мой view.py

def epred(emotion):
  global ep
  ep = emotion

def res(request):
  global sc_id,cc_id,hc_id,ht_id,a_id,fht_id,ct_id, ep
  sc_id = request.GET.get('skincolor')
  cc_id = request.GET.get('clothingcolor')
  hc_id = request.GET.get('haircolor')
  ht_id = request.GET.get('hairtype')
  a_id = request.GET.get('accessory')
  fht_id = request.GET.get('facialhairtype')
  ct_id = request.GET.get('clothingtype')
  update(fht_id, ct_id, cc_id, a_id, hc_id, ht_id, sc_id, ep)
  return render(request, 'result.html')

def gen(camera):
   while True:
      frame = camera.get_frame()
      update(fht_id, ct_id, cc_id, a_id, hc_id, ht_id, sc_id, ep)

      yield (b'--frame\r\n'
           b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

def video_feed(request):
   return StreamingHttpResponse(gen(VideoCamera()), content_type ='multipart/x-mixed-replace; boundary=frame')

Это мой файл result.html, где мне нужно отобразить изображение

<body style="background-color:#9ADCFF">
<h1 id="mh1">LOOK AT THE CAMERA</h1>
    

    <div class="row">

        <div class="column" id="cols">
            
            <img src = "{% url 'video_feed' %}">
        </div>

        <div class="column" id="cols">
            <img id="resimg" src="{% static 'output/emoji1.svg' %}">
            <div id="resbtn">
                <a href="#"><button class="btn btn-primary" style="margin-right: 80px;">Share</button></a>
                <a href="#"><button class="btn btn-danger">Download</button></a>
            </div>
        </div>
</div>

<script>
  var imageSources = ["output/emoji1.svg","output/emoji2.svg"]

  var index = 0;
  setInterval(function(){
    if (index === imageSources.length) {
      index = 0;
    }
    document.getElementById("resimg").src = imageSources[index];
    index++;
  }, 200);
</script>
Вернуться на верх