이미지를 반응적으로 표시

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> 
    ) 
    } 
} 

제 1, 나는 가장 중요한이이 내 콘솔 :

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

내가 백엔드에서 보내, 나는 jpg의 콘텐츠 유형을 설정하고있다.

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

반응이 json 형식을 기대하기 때문에 표시하지 않을 수도 있습니다. 미리 감사드립니다.

Answer 1

가져 방금 SRC로 설정할 수 있습니다 때 JSON 또는 64 기수로 구문 분석하는 데 사용할 필요가 없습니다 :

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