Вопросы Теги

Показать изображение из URL-адреса ReactJS, передавая пользовательские заголовки для запроса [дублировать]

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

Как уже упоминалось, большинство простой способ сделать это так. 

  html {position: relative;  мин-высота: 100%;  } body {background-color: transparent;  позиция: статическая;  высота: 100%;  margin-bottom: 30px;  } .site-footer {position: absolute;  высота: 30 пикселей;  bottom: 0px;  left: 0px;  right: 0px;  }

Однако свойство, не упоминаемое в сообщениях, по-видимому, потому, что оно обычно является по умолчанию, является позицией: static в теге body. Позиция относительная не будет работать!

Моя тема Wordpress переопределила отображение тела по умолчанию, и это смутило меня в течение долгого времени.

11
задан Alex K. 18 November 2014 в 18:19
поделиться

2 ответа

Вы не можете изменить HTTP-запрос браузера для ресурсов, загруженных тегом <img>. Что бы вы ни пытались сделать, вам нужно будет найти альтернативный подход.

Например, вы можете проксировать запрос через свой собственный сервер и изменять заголовки там. Или вы можете параметризовать URL-адрес ресурса с помощью строки запроса.

Как указывает Алекс, вы также можете использовать объект XmlHTTPRequest для загрузки данных изображения и использовать setRequestHeader , хотя я подозреваю, что вы ограничены в том, какие заголовки вы можете установить (я сомневаюсь, что вы можете подменять реферер или пользовательский агент, например, хотя я этого не тестировал).

6
ответ дан Drew Noakes 16 August 2018 в 03:50
поделиться

Я опаздываю здесь, но вы можете сделать это с помощью XMLHttpRequest и blob. 

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) {
        var img = document.createElement('img');
        img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob
        document.body.appendChild(img);
    }
};
xhr.open('GET', 'http://images.example.com/my_secure_image.png', true);
xhr.setRequestHeader('SecretPassword', 'password123');
xhr.send();

Если вы хотите, вы можете проверить, чтобы убедиться, что тип MIME блоба - это изображение.

23
ответ дан robbie0630 16 August 2018 в 03:50
поделиться
  • 1
    Благодаря! Это никогда не поздно :) – andrey 10 March 2017 в 18:45
  • 2
    @ robbie0630 прибил его – Gandhi 23 January 2018 в 14:36
  • 3
    @Paulo Я не копировал этот ответ. Кроме того, это решение работает со строками и btoa (и может сломаться с некоторыми кодировками символов), в то время как мой делает это чисто с помощью blob. Не стесняйтесь использовать любой ответ, который вам подходит. – robbie0630 11 June 2018 в 06:28
  • 4
    Это работает, однако браузер не будет кэшировать его ... Уу знаете, как его кешировать? – Apeiron 7 August 2018 в 20:03
Другие вопросы по тегам:

Похожие вопросы: