Вернуть изображение из Node REST API и использовать в img.src на стороне клиента

Question

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

router.get('/:userId/images/:imgId', (req, res) => {
  Image.findOne(
    { _id: req.params.imgId },
    (err, img) => {
      if (err) {
        res.status(500).send('someErr');
      } else {
        var resultImg = Buffer.from(img.data, 'base64');
        res.writeHead(200, {
          'Content-Type': 'image/png',
          'Content-Length': resultImg.length
        });
        res.end(resultImg);
      }
    }
  );
});

На стороне клиента:

<img src={`api/users/${userId}/images/${imgId}`} />

В чем я уверен:

1. путь указан правильно, сервер получает запрос и возвращает ответ 200
2. данные правильно извлечены из MongoDB
3. строка base64 верна (когда я копирую вставку в верификатор, как https://codebeautify.org/base64-to-image-converter, она работает)

Почему изображения не загружаются?

Answer 1

убедитесь, что в выходных данных есть эта строка в начале

<img src='data:image/png;base64,your base 64 goes here'/>

, которую вы можете проверить, скопировав выходные данные и поместив их в статический html, и посмотрите, работает ли он.так что может быть что-то подобное поможет

<img src=`data:image/png;base64,{`api/users/${userId}/images/${imgId}`}`/>

Answer 2

Вы пробовали использовать свой бэкэнд, используя AJAX или Fetch API?После этого вы можете загрузить ответ этого API в элемент изображения