爲什麼我的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字符串只顯示我的照片的一部分？

回答

相關問題