なぜ私のbase64文字列は自分の写真の一部にしか表示されませんか？

Question

前の質問hereコミュニティから助けを受けて、結果のbase64文字列をsrc属性として設定しましたが、画像の1つまたは複数の画像には画像の下部がありません。下の画像をご覧ください。以下は

私は画像の内容を設定するために使用しているコードです。画像の残りの部分を表示するにはどうしたらいいですか？

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.postImageの代わりにthis.state.profileImageする必要があります。また、画像の他の部分が他のUI要素で覆われているかどうかを確認してください。ブラウザが提供するDOM Explorerウィンドウを使用して、これらのhtml要素に適用されたhtml要素とスタイルシートを確認できます。