如何在React組件中顯示來自使用AWSS3的后端的位元組陣列影像？

我正在嘗試使用 React 從 SpringBoot API 后端顯示存盤在 AWS 中的影像。在執行以下獲取時，我從服務器獲得的回應是??：

  ‰PNG


IHDR?X3N?jsRGB??égAMA±üa    pHYs.#.#x￥?vf/IDATx^íY|]wy?q?!?–eù–myê#vlg'?=é2?u M?@h?B??′D2úé eh??$$…?@2I?ê"?lo?S–lI–,K??t?÷üóK99’?ò??J?÷????1o×?|?y?o=?A218?P?.3—:?j???!(¤W-???’~ 4
    o@‘H2   @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !$d€?@H2  @B Hè$  € !
§?c?±??????ˉ?tz-?=}……a|??÷
}6′ì??lèJ?J2YuMk‰?ê%?e1`¨e|ù?—?t??W~;ü?@??×2(?÷q?   }Vtè"??oà€|￥1O[?t5QKu‘U[yàùú×?^}?gì?è￠??2?<P?üü"?ó?PkZKú€D?êI6?a?úêO“{|J??3D?úB3r?;v,mmm×??q?·??-oFW3?μ|M?%f}6|
etc

我認為我必須將其轉換為如下的 blob，但影像沒有出現在組態檔中。

Profile.js：

const GET_SINGLE_USER_URL = 'http://localhost:8080/users/get-user-by-username'
const USER_IMG_URL = 'http://localhost:8080/image-files/'
class Profile extends Component {

    constructor(props) {
        super(props);
        this.state = {user: '', token: '', img: ''};
    }


    componentDidMount() {
        const imgUrl = USER_IMG_URL   localStorage.getItem("username");
        const payload = {
            "username": localStorage.getItem("username"),
            "password": localStorage.getItem("password")
        };
        fetch(GET_SINGLE_USER_URL, {
            method: 'POST',
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": localStorage.getItem("token")
            },
            body: JSON.stringify(payload)
        })
            .then(response => response.json())
            .then(data => this.setState({user: data}));

        fetch(imgUrl, {
            method: 'GET',
            headers: {
                "Authorization": localStorage.getItem("token")
            }
        })
            .then(r => r.arrayBuffer())
            .then(buffer => { 
                const blob = new Blob([buffer]);
                this.state.img = URL.createObjectURL(blob);
            });

    }
    render() {
        const {user, img, isLoading} = this.state;

        if (isLoading) {
            return <p>Loading...</p>;
        }

        return (
            <div className="outer-div-container">
            <div>
                <AppNavbar/>
                <Container fluid>
                    <div id="flexbox-container">
                    <div className="card-container" id="profile-card-container">
                    <Card className="profile-card">
                        <CardImg src={img} />
                        <CardText className="profile-data">{user.name}</CardText>
                        <CardText className="profile-data">{user.username}</CardText>
                        <CardText className="profile-data">{user.location}</CardText>
                    </Card>
                    </div>
                    </div>
                </Container>
            </div>
            </div>

我不確定如何在 React 組件中將位元組陣列轉換為可顯示的影像。

任何幫助將不勝感激，謝謝。

我也試過：

async getImage() {
        const imgUrl = USER_IMG_URL   localStorage.getItem("username");
        fetch(imgUrl,{
            method: 'GET',
            headers: {
                "Authorization": localStorage.getItem("token")
            }
        })
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    image: "data:image/png;base64,"   data
                })
            })
        console.log(this.state.image) // *1
    }

現在它在回應的“PNG”行上顯示意外的 JSON 輸入。

另外，當我上傳 jpeg 檔案時，我會得到 '???àJFIFHH??'

uj5u.com熱心網友回復：

這種方法下載影像，獲取位元組陣列，將其轉換為 aBlob并將二進制資料填充到可用于影像源的魔術 url 中。

const IMAGE_URL = "https://placekitten.com/200/300";

const fetchImage = async (url) => {
  try {
    const response = await fetch(url);
    const imageBytes = await response.arrayBuffer();
    var blob = new Blob([imageBytes], { type: "image/jpeg" });
    var imageUrl = URL.createObjectURL(blob);
    return imageUrl;
  } catch (error) {
    console.log("ERROR:", error);
  }
};

(async () => {
  const imageSrc = await fetchImage(IMAGE_URL);
  console.log(imageSrc);
  document.getElementById("kittenImage").src = imageSrc;
})();

document.getElementById("app").innerHTML = `
<h1>Kitty!</h1>
<image id='kittenImage'>
`;

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>

    <script src="src/index.js">
    </script>
</body>

</html>

uj5u.com熱心網友回復：

您可以將影像回應作為資料 URL 嵌入 img 標簽的 src 屬性中。

將 ArrayBuffer 轉換為資料 URL：

export function toDataURL(img:ArrayBuffer, contentType:string) {
    const image = btoa(
        new Uint8Array(img)
            .reduce((data, byte) => data   String.fromCharCode(byte), '')
    );
    return `data:${contentType};base64,${image}`;
}

標籤：

上一篇：createOrder中斷了paypalapi

下一篇：我對GeometryReader的愛恨情仇