Returning azure blob file from http trigger azure python function to frontend request

Question

how can one return file received in http triggered azure python function to frontend eg react fetch request and then show it etc. Below in answer i'll tell the details how it can be done.

Answer 1

從 azure python function 返回可以使用例如 ZC1C425268E683854F1AB507Image4C17A

blob_client=BlobClient.from_connection_string(connect_str,container_name,file_name)    
return func.HttpResponse(blob_client.download_blob().readall(),status_code=200)

對於接收和查看作為響應，例如圖像，可以在前端執行類似的操作：

 fetch("http://localhost:7071/api/getImage")
    .then((response) => response.blob())
    .then((imageBlob) => {
    const url = URL.createObjectURL(imageBlob);
    this.setState({ ImageURL: url });
  });

並通過樣式類或直接將此 url 連接到您的媒體標簽，例如：

<CardMedia
  style={classes.avatar}
/>

classes.avatar 在其中包含 url 以設置圖像：

 avatar: {
    backgroundImage: "url(" + this.state.ImageURL + ")",
  },