Узел / Express. js не отображает изображения на рабочем сервере. - PullRequest
Новая
       38

Узел / Express. js не отображает изображения на рабочем сервере.

1 голос
/ 17 апреля 2020

У меня проблема с моим MERN приложением стека. изображения в приложении root express отображаются в среде разработки, но при развертывании приложения в heroku изображения не отображаются. Я обработал изображения статически, используя app.use(express.static('images')), но он все еще не отображается в производственной среде. Вот файл index.js на сервере express. 

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 бэкэнда.

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

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

вместо

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

Это должно сработать, и ваш post.image должен иметь /images слизняк или вам нужно добавить тоже к вышесказанному sr c

0 голосов
/ 17 апреля 2020

Не могли бы вы поделиться примерами данных, например, что находится в post.image.

Кроме того, вам не нужно определять сервер stati c для каждой подпапки, если вы определяете root ее как показано ниже.

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

...