React, Springboot :: 바이너리(varbinary) 타입 데이터 불러와 이미지로 뿌려주기

이전에 했던 프로젝트에서는 구현을

1. 백엔드 단에서 바이너리를 쪼금 주무르고, api 화 시킴

2. 완성된 api를 통하여 화면 단에서 바로 불러오게 함.

이런 형식으로 구현했었는데.. 그럴 필요가 없다는 것을 알게 되었다.

 

인터넷 서칭해보면 양 단에서 blob 형태로 잔뜩 주무르고 있는 것들을 볼 수 있어서,

쉽게 쉽게 하는 방법을 포스팅해보고자 한다.

 

물론, 화면 단에서 서버로 이미지를 바이너리 타입으로 저장하는 것은 비슷한 방법으로 먹히는지 모르겠다.

 

현재는 "불러와서 화면에 뿌려주기"에만 집중한다.

 

1. 백엔드에서 이미지 파일을 가지고 온다. 그대로 가지고 옴. (가공 x)

2. 프론트엔드 단에서 해당 데이터를 확인해보면 바이너리 타입이 아니라 string 타입으로 가지고 올 것이다.

3. 프론트엔드단에서 해당 코드를 사용하여 불러온다.

<img src={`data:image/jpeg;base64,${data.ShoesImage2}`} />

// api로 받아온 전체 데이터를 data 라는 변수에 할당해두었으며,
// 그 중 사진(바이너리) 데이터인 SheosImage2. 를 가지고 옴.

이미지 태그 사용하여 컨버팅만 잘해주면 된다.

 

만약 본인이 가져온 데이터가 api를 거치고 왔는데도 불구하고 string 타입이 아닌 binary나 varbinary 형태의 타입으로 뜬다면,

<img src="data:image;base64,@Convert.ToBase64String(data.ShoesImage2)"/>

이런식으로 해주면 된다.