Как обслуживать изображение с моего сервера с помощью стека MERN

Question

Широкий обзор моего приложения: пользователи могут отправлять сообщения с изображениями и текстом.

Я использую стек MERN.

В настоящее время изображения сохраняются на моем localhost:3001 сервере по адресу /public/uploads/<images>, а затем маршрут сохраняется в моей базе данных.

Я сейчас пытаюсь отобразить сообщения на экране.

// example value of what gets stored into my db
// post.img.url = "public\uploads\user-5cc37dda4142ff49a8c903d2-1557200552890.png"

posts.map( ( post, i ) => {
  return <img src={ post.img.url } alt='post image'} />
} )

Когда я наведите курсор мыши на консоль Chrome, чтобы просмотреть возвращаемый маршрут, это маршрут, который отображается: http://localhost:3000/profile/admin/posts/public/uploads/user-5cc37dda4142ff49a8c903d2-1557174873119.png

Чтобы на самом деле просмотреть изображение, вам нужно пойти по этому маршруту: http://localhost:3001/uploads/user-5cc37dda4142ff49a8c903d2-1557200552890.png

Как я могу получить правильный маршрут для моих изображений?

Некоторые дополнительные сведения, которые могут иметь значение

// this line is in my server.js
app.use( express.static( path.join( __dirname, 'public' ) ) )

Answer 1

Просто установите некоторую глобальную или .env переменную в вашем приложении React, которая содержит http-маршрут к вашему серверу, например: SERVER_HOST = 'http://localhost:3001'. Затем вам нужно сохранить относительный путь к вашим изображениям в базе данных, как /uploads/user-*.png. Теперь вы можете получить доступ к таким изображениям:

posts.map( ( post, i ) => {
  return <img src={ SERVER_HOST + post.img.path } alt='post image'} />
})