如何在 React 组件中显示来自使用 AWS S3 的后端的字节数组图像？

Question

我正在尝试使用 React 从 SpringBoot API 后端显示存储在 AWS 中的图像。 我在执行以下获取时从服务器得到的响应是：

  ‰PNG


IHDRäX³N•jsRGB®ÎégAMA±üa    pHYs.#.#x¥?vf/IDATx^íÝ|]wyÿqï!Ë–eÙ–myÊ#vlg'„=É2«u M¡@hšBÛ?´Ð2úé eh˜„$$…ã@2IÂÊ"‹loËS–lI–,K¶¼þÏ÷ÜóK99’îÒ½çJŸ÷ëõ¼î¹º×¶|ÇyÎo=¿A²18¼Pš.³—:Ô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‹±žõãÿø篿þz­Ô=}……ª|Ž÷
}6´ÌŠ®lèJ®J²ÝuMk‰Œê%Ÿe1`¨e|ùå—?tå•W~;üÑ@¡Õײ(½÷qŸ   }VþÈ"Ÿ»oÀ€¦¥1O[Ät5QKu‘U[yÀùú׿^}Ægì¾è¢‹ž²ä<PæüÜ"îó¡PkZKÚ€DãÊI6ßâÇÚÊO“{|JÄ?³ÐæÚB3rœ;v,mmm×ÑÑqô·¾õ­ºFW3çµ|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ÿÛ”

Answer 1

您可以将图像响应作为数据 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}`;
}

Answer 2

这种方法下载图像，获取字节数组，将其转换为Blob并将二进制数据填充到可用于图像源的魔法 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>