Node/Express.js 不在生产服务器上显示图像答案

【问题标题】：Node/Express.js does not display images on production serverNode/Express.js 不在生产服务器上显示图像
【发布时间】：2020-04-17 09:56:38
【问题描述】：

我的MERN 堆栈应用程序有问题。根 express 应用程序中的图像显示在开发环境中，但是当我在 heroku 上部署我的应用程序时，图像拒绝显示。我使用app.use(express.static('images')) 静态提供图像，但它仍然没有显示在生产环境中。这是 express 后端的index.js 文件。

app.use('/images', express.static(path.join(__dirname, 'images')));
app.use('/images/profilephotos', express.static(path.join(__dirname, 'images/profilephotos')));
app.use('/images/productimages', express.static(path.join(__dirname, 'images/productimages')));
app.use('/images/postimages', express.static(path.join(__dirname, 'images/postimages')));
app.use('/images/coverimages', express.static(path.join(__dirname, 'images/coverimages')));

这就是我需要前端图像的方式。

  if(posts) {
   renderPosts = posts.map(post => {
          return (
            <div key={post._id} className="homeposts__box">
                {post.image ? <img className="homeposts__img" src={'http://' + window.location.hostname + '/' + post.image} alt="Article image" /> : null }
                <div className="homeposts__contentbox">
                  <h6>Article</h6>
                  <h3><NavLink to={'/blog/' + post._id}>{post.title}</NavLink></h3>
                  {post.tags ? post.tags.map(tag => <span className="homeposts__tags">{tag}</span>) : null}
                  <p>{post.body}<NavLink to={'/blog/' + post._id}>Read More</NavLink></p>
                  <span>by <span style={{fontWeight: 'bold'}}> {post.firstName + ' ' + post.lastName} </span> • <Moment format="MMM D YYYY">{post.createdAt}</Moment> • Comments: <span style={{ color: '#082e40'}}>{post.comments}</span></span>
                </div>
            </div>
          )
        })
      } else {
         renderPosts = <Skeleton count={4}/>
      }

我也尝试过在我期望工作的相对路径上使用

  if(posts) {
   renderPosts = posts.map(post => {
          return (
            <div key={post._id} className="homeposts__box">
                {post.image ? <img className="homeposts__img" src={post.image} alt="Article image" /> : null }
                <div className="homeposts__contentbox">
                  <h6>Article</h6>
                  <h3><NavLink to={'/blog/' + post._id}>{post.title}</NavLink></h3>
                  {post.tags ? post.tags.map(tag => <span className="homeposts__tags">{tag}</span>) : null}
                  <p>{post.body}<NavLink to={'/blog/' + post._id}>Read More</NavLink></p>
                  <span>by <span style={{fontWeight: 'bold'}}> {post.firstName + ' ' + post.lastName} </span> • <Moment format="MMM D YYYY">{post.createdAt}</Moment> • Comments: <span style={{ color: '#082e40'}}>{post.comments}</span></span>
                </div>
            </div>
          )
        })
      } else {
         renderPosts = <Skeleton count={4}/>
      }

我需要知道如何从我的 express 后端静态地在生产服务器上提供这些图像。

【问题讨论】：

尝试通过浏览器中的url获取图片

标签： node.js reactjs express heroku production-environment

【解决方案1】：

您能否分享示例数据，例如 post.image 中的内容。

此外，如果您像下面这样定义子文件夹的根目录，则无需为每个子文件夹定义静态服务器。

app.use('/images', express.static(path.join(__dirname, 'images')));

【讨论】：

图片/封面图片/fd77fa88-8628-45a4-8f40-3fd46e525792interracialonbeach-1024x538.jpg。这是post.image
如果你把这个url直接放在浏览器中会发生什么，它会显示图像吗？像 localhost:PORT/images/coverimages/fd77fa88-8628-45a4-8f40-3fd46e525792interracialonbeach-1024x538.jpg
是的，它可以工作，但在生产中它不能与站点 url 一起工作
顺便问一下，你在哪里上传你的图片？
应用部署到heroku。我猜图片在哪里

【解决方案2】：

src={'http://' + window.location.hostname + '/' + post.image}

改为

src={`/${post.image}`}

这应该可以工作并且你的post.image 应该有/images slug 或者你需要将它也附加到上面的src

【讨论】：