ПОЛУЧИТЕ файлы изображений из статической папки и отобразите их в клиентском приложении - PullRequest
Новая
       9

ПОЛУЧИТЕ файлы изображений из статической папки и отобразите их в клиентском приложении

0 голосов
/ 15 февраля 2019

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

app.use('/uploads', express.static(Path.join(__dirname, `/../uploads`)))

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

IHDRXZ��9�|iCCPICC Profile(�c``*I,(�aa``��+)
rwR���R`������ �`� ��\\��À|����/���J��yӦ�|�6��rV%:���wJjq2#���R��d

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

Я также прочитал альтернативный способотправки изображений по проводам между клиентом и сервером, что должно было бы настроить мой запрос GET.Начиная с этой темы В основном используется экспресс '.sendFile, однако это не работает, поскольку я получаю 404 не найден.Что-то еще не так?

В любом случае, я думаю, вопрос в том, как мне получить файлы в формате, который я могу отобразить в моем клиентском приложении?

Это то, что мой код клиентавыглядит так: 

return isomorphicFetch(`${MY_URL}/${imageId}`, {
    headers: {
      Accept: 'application/json'
    }
    method: 'GET'
  })
.then(res => {
    console.log('My fetched image', res)
    return res
 })

1 Ответ

0 голосов
/ 15 февраля 2019

Почему бы просто не использовать элемент <img>? 

const img = document.createElement('img');
img.src = `${MY_URL}/${imageId}`;
someplace.appendChild(img);

BTW , если по какой-либо причине, например, при отправке пользовательских заголовков HTTP, вы хотите использовать fetch(): 

fetch(`${MY_URL}/${imageId}` /*...*/)
  .then(res => res.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    somewhere.appendChild(img);
  });
...