为什么我的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元素和样式表。