Как отобразить изображение, для которого требуется токен на предъявителя

Question

Я пытаюсь найти способ отобразить изображение в моем приложении реакции. Для нужного изображения требуется токен носителя, другими словами, когда я получаю доступ к этому изображению, мне нужно передать заголовок с токеном носителя. Я перехожу от реактивного к нативному, поэтому в реактивном я могу напрямую указать заголовок в компоненте Image, но кажется, что я не могу передать заголовок в тег img, который является тегом html. Итак, мой вопрос: как отобразить изображение, для которого требуется токен на предъявителя, чтобы получить доступ к нему в реакции?

Answer 1

Если вы используете топор ios, не забудьте добавить 'responseType', в противном случае он не работает.

axios
  .get(endpoint, {
    headers: { Authorization: 'xxxxxxxxxxxx' },
    responseType: "arraybuffer",
  })
  .then((response: any) => {
    let data = `data:${
      response.headers["content-type"]
    };base64,${new Buffer(response.data, "binary").toString("base64")}`;

Answer 2

использовать базовый источник изображения

constructor(props) {
   super(props);
   this.state = {
      imgSrc: '',
   };
}

componentDidMount() {
    fetch('http://localhost:8181/images/appliance-OTHER.svg', {
         method: "GET",
         headers: { Authorization: 'Bearer eyJhbGciOiJIU' }
    }).then((response) => {
        const data = `data:${response.headers['content-type']};base64,${new Buffer(response.data).toString('base64')}`;
            this.setState({ imgSrc: data });
    });
}

render() {
  const { imgSrc } = this.state;
  return (
     <img src={imgSrc} alt="love is gone" />
  )
}