REACTの画像を表示

Question

私はバックエンドから画像を取得しており、反応を使用してフロントエンドに表示しようとしています。 ファイルを取得するときにイメージを正しく設定していないと思います。 、私はサービスからの応答があるので：

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAg ... 

をそして、これは私のコードです：

constructor(props) { 
     super(props); 
     this.state = { 
      file: [] 
     } 
} 
fetchPicture(){ 
    const {match} = this.props 
    const id = match.params.id 
    const { file } = this.state; 
    fetch("/hunter/picture?page=" + id) 
     .then(res => res.json()) 
     .then(file => this.setState({ file })); 
    } 

render() { 
    return(
    <Form> 
     <img alt="" src={`data:image/jpg;base64,${this.state.file}`}/> 
    </Form> 
    ) 
    } 
} 

、私が最も重要持っているこの私のコンソール上：

Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0 

私はバックエンドから送って、私はjpgのコンテンツタイプを設定しています。

HttpHeaders headers = new HttpHeaders(); 
     headers.set("Content-Type", "image/jpg"); 

reactがjson形式を期待しているため、表示しない理由もありますか？ ありがとうございます！

Answer 1

フェッチとあなただけのSRCとして設定することができたときにJSONまたはBASE64としてそれを解析するために使用する必要はありません：

<img alt="" src={"/hunter/picture?page=" + this.props.match.params.id} />