Загрузка изображения с BLOB-объектами и массивом буферов на Django не работает

Question

Теперь мне нужно загрузить изображения в html с некоторыми заголовками, поэтому я использовал метод blob и arraybuffer, чтобы загрузить его, вместо того, чтобы просто ссылаться на img src.

Но, похоже, это не работает, потому что:

1. В методе BLOB-объектов состояние запроса равно 0, а состояние готовности не всегда завершено.
2. В методе массива буферов onload не вызывается ни в одном браузере.

Я уверен, что ссылка не повреждена, потому что я тестировал ее на python с тем же URL и заголовками.

Это код:

<script type="text/javascript">
function getimg(linksrc,imgid){//using arraybuffer

    var oReq = new XMLHttpRequest();
    oReq.open("GET", linksrc, true);
    oReq.setRequestHeader('User-Agent',"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36");
    oReq.setRequestHeader('Referer',"https://dccon.dcinside.com/");
    oReq.setRequestHeader('Sec-Fetch-Mode',"no-cors");
    // use multiple setRequestHeader calls to set multiple values
    oReq.responseType = "arraybuffer";
    oReq.onload = function (oEvent) {
      var arrayBuffer = oReq.response; // Note: not oReq.responseText
      if (arrayBuffer) {
        var u8 = new Uint8Array(arrayBuffer);
        var b64encoded = btoa(String.fromCharCode.apply(null, u8));
        var mimetype="image/png"; // or whatever your image mime type is
        document.getElementById(imgid).src="data:"+mimetype+";base64,"+b64encoded;
      }
    };
    alert("aa")
    oReq.send(null);
}
function getimg2(linksrc,imgid){

    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob'; //so you can access the response like a normal URL
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
            alert("inin");
            var img = document.getElementById(imgid);
            img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob
        }
    };
    xhr.open('GET', linksrc, true);
    xhr.setRequestHeader('User-Agent',"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36");
    xhr.setRequestHeader('Referer',"https://dccon.dcinside.com/");
    xhr.setRequestHeader('Sec-Fetch-Mode',"no-cors");
    xhr.send();
}
</script>

<div class="card-columns" >
    {% for conl in dclist %}
        <div class="card" >
            <img src="" id="{{conl.4}}" class="card-img-top" alt="{{conl.0}}">
            <script>
                getimg("{{conl.3}}","{{conl.4}}");
            </script>
            <div class="card-body">
                <h5 class="card-title" style="white-space:nowrap;font-family: 'Noto Sans KR', sans-serif;"><b>{{conl.0}}</b></h5>
                <p class="card-text">by {{conl.2}}</p>
                <form method='GET' action="">
                    <input type="hidden" name="idxn" value={{conl.1}} />
                    <button class="btn btn-primary btn-sm" type="submit">Download</button>
                </form>
            </div>
        </div>
    {% endfor %}
</div>

Заранее спасибо.