Cannot get "images" net::ERR_CONNECTION_REFUSED (Gitpod)

On Gitpod, my NextJS frontend is trying to fetch the list of objects which contain "product names", "prices" and "images" from my Django Rest API backend. Then, my NextJS frontend can get the list of objects which contain "product names" and "prices" but not "images" so my NextJS frontend cannot get only "images" as shown below:

("product names" such as "boots 4", "boots 3" ... and "prices" such as "£12.10", "£10.50" ... are displayed but not "images")

This is my desired output with "product names", "prices" and "images":

On Gitpod, both my NextJS frontend on port 3000 open (private) and my Django Rest API backend on port 8000 open (private) are running:

And my NextJS frontend uses this Rest API call with "localhost" as shown below to get the list of objects which contain "product names", "prices" and "images":

http://localhost:8000/api

And, there are these errors:

3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/paid.png net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/size.png net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/download.jpg net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/02173_l.jpg net::ERR_CONNECTION_REFUSED

Actually, I solved these errors above by using this Rest API call with my Gitpod domain as shown below to get the list of objects:

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

But other error occurs as shown below:

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();

Actually, this Rest API call with my Gitpod domain is correct because with this Rest API call, I can get the list of objects on Postman from my Django Rest API backend on Gitpod:

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

Are there any solutions to solve this error and get the list of objects which contain "product names", "prices" and "images"?

You should make the port 8000 for your Django Rest API backend "public" to get the list of objects which contain "product names", "prices" and "images":

Finally, you can get the list of objects which contain "product names", "prices" and "images":