为什么我的base64字符串只显示我的照片的一部分?
问题描述:
关于上一个问题here我从社区获得帮助以将生成的base64字符串设置为src属性,但是,图像或图像缺少图像的底部。请看下面的图片。为什么我的base64字符串只显示我的照片的一部分?
下面是我使用的设置图像内容的代码。如何让图像的其余部分显示?
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。
答
<img ref="postMedia" src={this.state.postImage} />
根据您的文章,SRC的值应该是this.state.profileImage代替this.state.postImage。另请检查图像的其他部分是否被其他UI元素覆盖。您可以使用浏览器提供的DOM Explorer窗口来检查应用于这些html元素的html元素和样式表。
首先检查您收到的数据是否完整。 – zerkms
不相关的,但仍然:btw,'this.props.post.ProfileImageId!= null'检查可能是多余的。 – zerkms
我仔细检查了大小,它是正确的。 azure上的blob是289.9kb,我从http响应中收到290kb。 – chesco