如何從快速后端服務器獲取圖像並將其顯示到 React Native 前端？

Question

搜索同一主題，我發現了另一個問題： 如何從快速后端服務器到 React js 前端獲取和顯示圖像？ 並在評論中有這樣的：“將你的 blob 轉換為文件 var file = new File( res.data, { type: "image/jpeg" } ); var imageUrl = URL.createObjectURL(file); 然后使用這個 imageUrl “。 所以我做了類似於他的代碼並得到錯誤。

fetchImages = () => {
 const imageName = 'Vinicius_0-1577392361334.jpg';
 api.get(`/image/${imageName}`)
  .then(res => {
    var file = new File(res.data, { type: 'image/jpg' });
    var imageURL = URL.createObjectURL(file);
    return (
      <Image source={imageURL} />
    )
  }).catch((err) => {
    console.log(err)        
  });}

routes.get('/image/:file', (req,res) =>{
  let file = req.params.file;
  let fileLocation = path.join(__dirname, '..', '..', 'backend/uploads/', file);

  res.sendFile(`${fileLocation}`);
});

         .....
<View style={styles.viewBotao}>
     {this.fetchImages()}
         .....

控制台輸出

Answer 1

嘗試將您的imageURL分配給狀態變量

constructor(props) {
    super(props);
    this.state = {
        imageURL: ''
    }
}

fetchImages = () => {
    ...
        var imageURL = URL.createObjectURL(file);
        this.setState({ imageURL });
    ...
}


<View style={styles.viewBotao}>
     <Image source={this.state.imageURL} />
</View>