javascript - 如何使用 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

只需在您的 React 应用程序中设置一些全局或 .env 变量，其中包含到您的服务器的 http 路由，如下所示:SERVER_HOST = 'http://localhost:3001'。然后您需要将图像的相对路径存储在数据库中，例如 /uploads/user-*.png。现在您可以像这样访问图像:

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