Как получить изображение из django FileResponse, используя javascript

Question

Я хотел бы визуализировать изображение в html, используя javascript, и изображение извлекается из представления django с использованием API выборки. Я думаю, что близок, но не могу понять, как отображать изображение в браузере, используя javascript.

view # 1: (url: builds / imgretrieve / int: device /)

class imgRetrieve(generics.GenericAPIView):
    permission_classes = (permissions.IsAuthenticated,)

    def get(self, request, *args, **kwargs):
        device = self.kwargs['device']
        deviceVals = CustomUser.objects.get(id=device)
        buildImg = ImageRequest.objects.filter(author = deviceVals).latest("dateAdded")
        return FileResponse(buildImg.image)

Когда я обращаюсь к этому представлению напрямую через браузер, оно отображает изображение, как и ожидалось.

Однако, когда я хочу, чтобы javascript отображал его в другом представлении, он просто отображает [ответ объекта] вместо изображения. Вот как я пытаюсь это сделать:

view # 2 (url: builds / cameraCam / int: device /)

class chamberCamView(LoginRequiredMixin,TemplateView):
    template_name = 'chamberCam.html'
    login_url = 'login'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        device = self.kwargs['device']
        deviceVals = CustomUser.objects.get(id=device)
        CustomUser.objects.filter(id = device).update(imgRequested = True, imgReceived = False,)
        context['deviceName'] = deviceVals.UserDefinedEquipName
        context['deviceID'] = deviceVals.id
        return context

html

{% block body %}
<p hidden id = "id">{{ deviceID }}</p>
<div class="">Chamber cam for {{deviceName}}</div>
<div class="imageDiv" id = "image">
</div>
{% load static %}
<script src="{% static 'camera/chamberCam.js' %}"></script>
{% endblock %}

камера Кам. js

let deviceID = document.getElementById("id").innerHTML;
getImg(deviceID)
function getImg(deviceID){
  fetch('http://127.0.0.1:8000/builds/imgretrieve/' + deviceID + '/')
    .then(function(res){
      return res;
    })
    .then(function(data) {
      let image = document.getElementById("image");
      console.log(data)
        image.innerHTML = `
        <img>${data}</img>
        `;
    })
    .catch(function(err){
      console.log(err);
    });
}

Answer 1

Я переборщил с этим .. Я заменил код javascript на:

let deviceID = document.getElementById("id").innerHTML;
addimage(deviceID)

function addimage() {
    var img = new Image();
    img.src = 'http://127.0.0.1:8000/builds/imgretrieve/' + deviceID + '/'
    image.appendChild(img);
}