Используйте React для обновления изображения новым с тем же подписанным URL

Question

Как вы извлекаете новое изображение (например, по таймеру) из AWS Signed URL из приложения React.

Изображение отображается с использованием <img src=signedurl />

Это похоже на этот вопрос , за исключением того, что использование обычного средства кеширования (например, добавление параметра строки произвольного запроса) не работает. AWS не допускает дополнительные строки запроса и приводит к следующей ошибке:

<Error>
  <Code>SignatureDoesNotMatch</Code>
  <Message>
    The request signature we calculated does not match the signature you provided. Check your key and signing method.
  </Message>
  ...
</Error>

Структура, которую я пытаюсь построить вокруг,

• клиент получает предварительно подписанный URL (после аутентификации / авторизации) в somebucket / some.jpg.
• Бэкэнд-процесс загружает новое изображение и заменяет some.jpg каждые X минут.
• клиент должен обновлять каждые Y минут и получать самое последнее изображение.

Answer 1

Мне удалось решить эту проблему. При указании img.src непосредственно на подписанном URL-адресе у меня не было возможности заставить браузер обновить изображение.

Однако я смог получить изображение через подписанный URL в моем JavaScript-коде React, преобразовать его в base 64, а затем установить img.src в строку данных. При необходимости это можно установить на таймере.

const url ='signed url';

// Fetch from the signed url. Ensure that the image is not retrieved from cache
const response = await fetch(url, { cache: 'no-store' });
const buffer = await response.arrayBuffer();

// Convert from buffer to base64 (thanks [devlucky][1])
let binary = '';
const bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach(b => binary += String.fromCharCode(b));
const base64 = window.btoa(binary);

const src = `data:image/jpeg;base64,${base64}`;

this.setState({ src });

<img src={this.state.src}>