CODEWITHSUNDEEP
reactjsimagewebpack
Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

Load dynamically generated images in React app

Backend generates images when a user submits a post request in a React app. After the calculations are done and the images are generated, I need to load them up from the specified folders. Can it be done with webpack at all or I would need to make an additional request to the server to retrieve the generated images? Right now I am trying to utilize the following code but the results are empty (when the images are already present in the folders the code is working fine when project is rebuilt with the images):

importAll = (r) => {
    return [r.keys(), r.keys().map(r)];
}

get_analysis_charts = () => {
  const pca_arr = this.importAll(require.context('../public/images/pca/', false, /\.png$/));
  imgArr = pca_arr[1]; 
  return imgArr;
}

render() {
...
{
    this.state.fullAnalysisDone ? 
      <div>
        <h3>PCA</h3>
        {
        this.get_analysis_charts().map((chart_img) => {
          return <img src = {chart_img} style = {{height:"300px", width:"400px"}}/>
        })
      }
  :""
  }
}

Upvotes: 1

Views: 39

Answers (1)

Domin8urMind
Domin8urMind

Reputation: 1314

Reposting as answer:

If I understand the sequence of events correctly, after the POST request the images are then generated in a folder on the server... thus in order for the client to get ahold of them, it would need to request each image separately. WebPack would be of no use here as it is more of a "build time" technology, not a "run time" technology. If the POST request can give you a clue as to what images are generated as well as their respective URLs, you can thus just render elements with those URL's as the src attribute for the client to download (and render) them. hth

Upvotes: 1

Related Questions