How to locally save the external images from an API?

I’m doing some research and making some demo using react-static.

I found a problem with the images, which is external images from the API instead of the images in CSS or local image for the UI.

For example, I’ve developed an API with Wordpress basic, there’re a lot of posts are returned by that API, sometimes there are a lot of images are returned as “Array” like the following JSON.

{
  "title": "testing title...",
  "content": "testing content...",
  "images": [
    "http://testing.abc.com/images/upload/testing1.jpg",
    "http://testing.abc.com/images/upload/testing2.jpg",
    "http://testing.abc.com/images/upload/testing3.jpg"
  ]
}

Is there any way to download the image and put them into the the <img tag as a relative path instead of absolute path, when we build a static website. So the result should be …

<img src="./public/images/upload/testing1.jpg"/>
or (based on the page url route)
<img src="../../public/images/upload/testing1.jpg"/>

instead of

<img src="http://testing.abc.com/images/upload/testing1.jpg"/>

[Pixelatex]

Right… so thinking a bit on how you could do this flow in your static config.

1. Fetch the posts from your api.
2. Iterate over the posts
3. Fetch the image(s) for that post and stream the result to a folder (fssync or something).
4. Pass the resulting file path, .e.g. images/file1.jpg as a prop to the posts route.
5. Profit!

[sytabaresa]

This process is a genuine candidate to be implemented in a plugin, related to #1130 issue, maybe a component that automatically download images in a static directory depending of they use. Or an official guide to use webpack + React Static to do this with an api.