Как асинхронно поменять URI на IMG - PullRequest
1 голос
/ 24 июня 2019

Возникла проблема с Django, а именно: 1. Есть в поле ввода шаблона и

<input class="uri-com" placeholder="URL on community" value="" onchange="addComURI(this.value)">
 <img id="fg-photo-50" class="community-50" src="{% static "img/community_50.gif" %}">
Когда вы добавляете ссылку на сторонний ресурс при вводе, я хочу заменить исходное изображение, которое расположено по этой ссылке.Скачивать к себе при этом ее не хочется.Я заменяю значение тега img в JS
document.getElementById("fg-photo-50").src = this.responseText;

Ссылка заменяется, но с учетом подключенной статики к шаблону, т.е. до того, как ссылка добавляет адрес моего хост-сервера

http://127.0.0.1:8000/%22https://getcim.com/RwO3inNPejmv9mTnK24R8EESIkhA/V6NXerYvQks

(ссылка не работает)

Мой addComURI:

function addComURI(comm_uri) {
    var xhr = new XMLHttpRequest();
    var params = 'comm_uri=' + encodeURIComponent(comm_uri);
    xhr.open('GET', 'test?' + params, true);
    xhr.send();

    xhr.onreadystatechange = function() {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        alert( 'error: ' + (this.status ? this.statusText : 'bad request'));
        return;
      }
      document.getElementById("fg-photo-50").src = this.responseText;
    }
}

И код Django, который отправляет ответ:

def request_community(request):
    comm_uri = request.GET.get("comm_uri", 1)
    fg_photo= get_community_photo(comm_uri)

    return HttpResponse(json.dumps(fg_photo), content_type='application/json')

Who will tell you how to properly replace the link to the image?

1 Ответ

0 голосов
/ 24 июня 2019

Ваша функция get_community_photo возвращает строку.Но прежде чем вы вернете это в браузер, вы вызываете json.dumps() на нем.Это имеет эффект оборачивания в дополнительную пару кавычек.Поэтому, когда вы присваиваете этот текст ответа изображению src, включается дополнительная цитата: вот что означает %22.

Решение состоит просто в том, чтобы этого не делать.Удалите json.dumps и просто верните значение:

return HttpResponse(fg_photo)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...