Question

我想让我的应用程序在Heroku上运行，但是有问题。 Heroku服务器找不到图像。在开发中，一切正常。正确加载图像。在heroku上，一切正常。要求json / api / articles给出结果json。路由器也可以工作。但是找不到图像。在tag和fetch（）中。

code => https://github.com/bartek-fecko/cinema-app

图片文件存在于heroku上（我在heroku.com上看到了重击）

var express = require('express');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../client/build')));

app.use('/api', indexRouter);
app.use('/api/users', usersRouter);
app.use(express.static(path.join(__dirname, '/assets/images')));//i'm sending a file

app.get('/images/:fileName', (req, res) => {
   res.sendFile(path.join(__dirname, `/assets/images/${req.params.fileName}`)); //here also i'm sending a file
});

app.get('/*', (req, res) => {
   res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

module.exports = app;

                  <P.Wrapper>
                     <img src="spider-man-far-from-home.jpg" alt="no img"/>
                     <img src="/images/spider-man-far-from-home.jpg" alt="no img"/>
                  </P.Wrapper>

我收到404错误。我尝试了一切，但没有用。提取fetch（'/ images / ...'）等相同。

Answer 1

根据您的代码，您有2台服务器：

后端服务器（在src内部）
前端服务器（在client内部）

自从启动它们以来，它们就位于不同的服务器上，这意味着它们将在不同的IP或相同的IP但不同的端口上运行。

这意味着您在客户端的App.tsx中获取图像很可能是引用了错误的主机。

fetch('/images/spider-man-far-from-home.jpg')

尝试使用fetch方法中同时包含主机名和端口名的完整URL，看看它是否对您有用。

Answer 2

是的。呜呜。现在正在工作。问题完全像Yee Hui Poh所说。所以在生产中，我必须提取到locallhost：8080 / images / spider-man-far-from-home.jpg 8080是后端服务器。

Express + React + Heroku找不到文件

2 个答案: