Преобразование строки base64 обратно в изображение в React

Question

Я пытаюсь преобразовать изображение, которое было изменено в base64 в бэкэнд-сервисе моего приложения, обратно в изображение на внешнем интерфейсе, но, похоже, с такой точки зрения оно наталкивается на стену. Вот что у меня есть для моего кода:

PhotoContainer.jsx

class PhotoContainer extends React.Component {

    constructor(props, context) {
      super(props, context);
      this.state = { photo: null };
    }

    async getUserPhoto(accessToken) {
      try {
        const photoResp= await requestAWSGet('path/to/api', undefined, accessToken);
        CachingService.setData('photo', photoResp);
        this.setState({ photo: photoResp});
      } catch (err) {
        log.error('AWSPost /api error:', err);
        throw err;
      }
    }

    render() {
      return (
          <PhotoComponent photo={this.state.photo} />
      );
    }
}

export default PhotoContainer

PhotoComponent.jsx

const PhotoComponent = props => (
    <>
        {`data:image/png;base64,${props.photo}`} alt={'photo'}
    </>
);

export default PhotoComponent;

Пример компонента, в котором я бы назвал PhotoContainer,jsx

class ExampleComponent extends React.Component {
  render() {
    return (
         <Container>
                <Card>
                    <Card.Img src={<PhotoContainer />} alt={'photo'} />
                    <Card.Body>
                         <p>Some text</p>
                    </Card.Body>
                </Card>
            </Container>
    );
  }
}

export default ExampleComponent;

Я неправильно использую строку преобразования в компоненте или есть более глубокая проблема с настройкой контейнера?

Answer 1

Вам необходимо провести рефакторинг PhotoComponent таким образом

const PhotoComponent = props => (
    props.photo ? <Card.Img
      src={`data:image/png;base64,${props.photo}`}
      alt={'photo'}
    /> : ''
);

экспортировать PhotoComponent по умолчанию;

ExampleComponent потребуется просто создать экземпляр PhotoContainer

class ExampleComponent extends React.Component {
  render() {
    return (
         <Container>
                <Card>
                    <PhotoContainer />
                    <Card.Body>
                         <p>Some text</p>
                    </Card.Body>
                </Card>
            </Container>
    );
  }
}

export default ExampleComponent;

Вы можете оставить PhotoContainer как есть.

Надеюсь, это поможет.