为什么我的 base64 字符串只显示我图片的一部分？

Question

在上一个问题here 上，我收到了社区的帮助，将生成的 base64 字符串设置为 src 属性，但是，图像缺少图像的底部。请看下图。

下面是我用来设置图像内容的代码。如何让图像的其余部分显示？

import React from 'react';
import axios from 'axios';
import * as settings from './settings';

export default class Post extends React.Component {
    constructor(){
        super();
        this.state = {
            profileImage:'img/loading.gif'
        };
    }
    componentDidMount(){
        if(this.props.post.PostImageId != "00000000-0000-0000-0000-000000000000"){
            // get post image data
            _rvw.getImage(this.props.post.PostImageId)
            .then((res)=>{
                this.setState({
                    postImage: "data:" + res.headers["content-type"] + ";base64," + res.data
                });
            });
        }
        else //no image
        {
            this.setState({
                postImage: "img/no-image.png"
            });
        }
    }
    getImage(id){
        let config = {
            headers:{
                'Content-Type': 'application/json',
                'Accept':'application/json',
                'Authorization':'Bearer ' + localStorage.token
            }
        };
        return axios.get(settings.baseUrl()+'/mediacontent/get/'+id,config);
    }
    render(){
        return (<div className="image">
                <img ref="postMedia" src={this.state.postImage} />
            </div>);
    }
}

完整的组件可以在here找到。

Answer 1

<img ref="postMedia" src={this.state.postImage} />

根据您的帖子，src 的值应该是 this.state.profileImage 而不是 this.state.postImage。还请检查图像的其他部分是否被其他 UI 元素覆盖。您可以使用浏览器提供的 DOM Explorer 窗口来检查 html 元素和应用于这些 html 元素的样式表。