Javascript JSX在生成图像时加载图像

我正在做一个生成图像的项目。我正在使用JSX作为React应用程序。我需要动态加载生成的图像（在图像页面上一个接一个地加载）。目前，我有一个名为getImages的函数。它等待我的Flask应用程序的响应，当返回时，这意味着徽标已生成并位于正确的位置（我认为运行此程序时会发生什么情况，它将等待两个图像加载，但我无法显示任何内容，即使两个图像都在正确的文件夹中）。一旦得到响应，getImages中的函数将返回Card对象（这只是一个简单的包装。我尝试了useEffect和按钮单击侦听器，但它们似乎不起作用。下面是我的getImages函数代码

    async function getImage1(){
        const response= await fetch("http://127.0.0.1:5000/img1")
        const data = await response.json();
        return (
        <Card image="my_path/output/img1.jpg"/>
        )
    }

    async function getImage2(){
      const response= await fetch("http://127.0.0.1:5000/img1")
      const data = await response.json();
      return (
      <Card image="my_path/output/img2.jpg"/>
      )
      }
    getImage1();
    getImage2()
  }

异步函数getImage1（）{ const response=等待获取（“http://127.0.0.1:5000/img1") const data=wait response.json（）； 返回( ) } 异步函数getImage2（）{ const response=等待获取（“http://127.0.0.1:5000/img1") const data=wait response.json（）； 返回( ) } getImage1（）； getImage2（） } 以下是我的wat页面返回代码：

useEffect(getImages)

    return (
      <div className="App">
        <button onClick={e => getImages}>GetImages</button>
        {getImages()}
      </div>
    );
  }

  export default Images;

useffect（getImages）
返回(
getImages}>getImages
{getImages（）}
);
}
导出默认图像；

---

我真的很感谢你们提供的帮助，所以请提前感谢。

为什么要获取图像而不处理数据？ 我认为您应该在组件状态下保存获取图像。或者只保存图像的url，然后在返回时执行以下操作：

   return(
      <>
          {images.map(imageUrl => <Card img={imageUrl}/>)}
      </>
   )

返回(
{images.map（imageUrl=>）}
)

还可以读取useffect函数的文档，特别是第二个argunmt参数

---

这是一个有趣的图像生成器

const App = () => {
  const [hash,setHash] = useState(0)
  return (
    <div>
        <Component hash={hash}/>
        <button onClick={()=>setHash(Math.random() * 100) + 1}>Generate Image</button>
        </div>
  )
}

const Component = ({hash}) => {  
const [isLoading,setIsLoading] = useState(true)
const [image,setImage] = useState('')
console.log(hash)
useEffect(()=>{
  fetch(`https://robohash.org/${hash}`)
    .then(response=>response.blob())
    .then(image => {      
      let url = URL.createObjectURL(image)
      setImage(url)
      setIsLoading(false)
  })
},[hash])


return(
  isLoading ? 'Loading...' :
    <div>
      <img src={image}/>
    </div>
  )
}

const-App=（）=>{
常量[hash，setHash]=useState（0）
返回(
setHash（Math.random（）*100）+1}>生成图像
)
}
常量组件=（{hash}）=>{
常量[isLoading，setIsLoading]=useState（真）
const[image，setImage]=useState（“”）
console.log（散列）
useffect（（）=>{
取回(`https://robohash.org/${hash}`）
.then（response=>response.blob（））
。然后（图像=>{
让url=url.createObjectURL（图像）
设置图像（url）
setIsLoading（错误）
})
}，[hash]）
返回(
正在加载？“正在加载…”
)
}

Hey@matt-b你查到下面的答案了吗？我知道了，谢谢！