Question

当用户在post应用中提交React请求时，后端会生成图像。完成计算并生成图像后，我需要从指定的文件夹中加载它们。可以完全使用webpack来完成，还是需要向服务器发出其他请求以检索生成的图像？现在，我正在尝试使用以下代码，但是结果为空（当图像已经存在于文件夹中时，使用图像重建项目时代码可以正常工作）：

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"}}/>
        })
      }
  :""
  }
}

Answer 1

重新发布为答案：

如果我正确理解了事件的顺序，则在POST请求后，图像便会在服务器上的文件夹中生成...因此，为了使客户端能够获取它们，它需要分别请求每个图像。 WebPack在这里将毫无用处，因为它更多地是一种“构建时间”技术，而不是“运行时”技术。如果POST请求可以为您提供有关生成哪些图像以及它们各自的URL的线索，那么您可以只渲染那些URL为src属性的元素，以供客户端下载（并渲染）它们。 hth

在React应用程序中加载动态生成的图像

1 个答案: