无法获得“图像”net::ERR_CONNECTION_REFUSED (Gitpod)

Question

在Gitpod上，my NextJS前端试图从E 110my后端中获取包含“产品名称”、价格“”和“图像”的对象列表。然后，my NextJS前端可以获得包含“产品名称”和价格“”而不是“图像”的对象列表，这样my NextJS前端E 221只能得到E 122“图像”E 223，如下所示：

(“产品名称”，如“靴子4”、“靴子3”.和“价格”，如“GB12.10”、“GB10.50”.显示，但不显示图像“”)

​

​

这是我想要的“产品名称”，价格“和”图像“”的输出

​

​

在Gitpod上，端口3000打开(私有)上的my NextJS前端和端口8000 open (私有)上的my Django Rest后端都在运行：

​

​

和我的NextJS前端使用Rest调用与"localhost"如下所示，以获取包含“产品名称”、价格“”和“图像”E 254的对象列表

http://localhost:8000/api

还有，有以下错误：

3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987

获取http://localhost:8000/media/images/paid.png net::ERR_CONNECTION_REFUSED net：：ERR_CONNECTION_REFUSED

获取http://localhost:8000/media/images/size.png net::ERR_CONNECTION_REFUSED net：：ERR_CONNECTION_REFUSED

获取http://localhost:8000/media/images/download.jpg net::ERR_CONNECTION_REFUSED net：：ERR_CONNECTION_REFUSED

http://localhost:8000/media/images/02173_l.jpg net::ERR_CONNECTION_REFUSED

实际上，通过使用Rest调用和(我的Gitpod域)解决了这些错误，如下所示，获取对象列表：

https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api

但其他错误如下所示：

Server Error
FetchError: invalid json response body at https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api reason: Unexpected end of JSON input

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.js (73:16) @ async getStaticProps

  71 | export async function getStaticProps() {
  72 |   const res = await fetch("https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api");
> 73 |   const posts = await res.json();
     |                ^
  74 | 
  75 |   // const ress = await fetch("http://127.0.0.1:8000/api/category/");
  76 |   // const categories = await ress.json();

实际上，这个带有的Rest调用是正确的，因为通过这个Rest调用，我可以从 Gitpod 上的my Django Rest API后端获得Postman上的对象列表。

https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api

是否有解决此错误的解决方案，并获得包含“产品名称”、价格“和”图像“”的对象列表？

Answer 1

您应该将作为Django后端"public"的端口8000，以获取包含“产品名称”、价格“和”图像“”的对象列表。

​

​

最后，您可以获得包含“产品名称”、价格“和”图像“”的对象列表。

​

​