为什么我的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。

来源

2017-04-19 chesco

首先检查您收到的数据是否完整。 – zerkms

不相关的，但仍然：btw，'this.props.post.ProfileImageId！= null'检查可能是多余的。 – zerkms

我仔细检查了大小，它是正确的。 azure上的blob是289.9kb，我从http响应中收到290kb。 – chesco

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

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

来源

2017-04-19 05:46:37 Amor

你好阿莫尔，我继续前进，并做了一些更正。我试图从完整的组件中提取代码以仅显示与我遇到的问题相关的问题，但现在我继续并添加了完整组件代码的链接。我希望这增加了更多的上下文。 – chesco

我建议你打印出C＃端和JS端的base64字符串。检查它们是否不同。然后，您可以使用一个图像标记创建一个简单的html文件，并使用base64字符串设置src属性。它将帮助您找到错误的位置。 – Amor

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

回答

相关问题