Question

我的应用程序的广泛概述：用户可以提交带有图像和文字的帖子。

我正在使用MERN堆栈。

当前，图像正在保存到我的localhost:3001的{{1}}服务器中，然后将路由保存到我的数据库中。

我现在正在尝试渲染屏幕上的帖子。

/public/uploads/<images>

当我将鼠标悬停在chrome控制台上以查看其返回的路由时，这是显示的路由： // 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'} /> } )

要实际查看图像，您必须转到以下路线：http://localhost:3000/profile/admin/posts/public/uploads/user-5cc37dda4142ff49a8c903d2-1557174873119.png

如何获取正确的图像路线？

一些其他重要的细节

http://localhost:3001/uploads/user-5cc37dda4142ff49a8c903d2-1557200552890.png

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'} />
})

如何使用MERN堆栈从服务器提供图像

1 个答案: