axios로 받아온 이미지를 보이게 하는 법

Question

스프링으로 구축된 서버 쪽에 이미지를 요청하는 rest api를 위와 같이 만들었는데요.해당 rest api가 제대로 응답하는지 테스트하기 위해서 다음과 같이 포스트맨으로 확인해봤습니다.이미지를 요청하는 rest api의 param을 설정해주고 헤더의 Authorization에는 유효한 토큰을 넣어주고 rest api의 반환 Content-type에 맞춰 헤더의 Accept를 image/jpeg로 해주었습니다. 이렇게 Postman에서 Get 요청을 설정하고 Get 요청을 날려보니 다음과 같이 제가 의도한 이미지를 받아온 것을 확인할 수 있었습니다.포스트맨을 통해 이미지를 받아오는 rest api가 제대로 동작하는 것을 확인했기 때문에 이제 실제 리액트에서 axios로 해당 rest api에 포스트맨에서처럼 get 요청을 날려 이미지 데이터를 받은 뒤 화면에 보여주려했는데요. 그런데 막상 받아온 이미지 데이터를 어떻게 해야 화면에 그려줄 수 있는지 막막하더라고요. 그래서 다음과 같이 일단 완전히 1차원적인 방식으로 받아온 데이터를 그대로 변수에 저장해주고 이미지 태그 안의 src 속성에 그대로 넣어줬습니다.당연하게도 제가 원하는 이미지가 보이질 않네요.제가 원한 화면은 다음과 같은 이미지가 보이는 것이었는데요.axios를 통해 get 요청을 날려 전달받은 data를 console.log로 그대로 출력해보면 다음과 같이 출력되는데요. 해당 이미지의 속성 등이 담겨있고 이미지가 인코딩된 데이터로 예상되는데 이 데이터를 어떻게 다뤄야 화면에 보여질수 있을까요?

Clickin · Answer

굳이 axios가 필요없이 그냥 해당 url 자체를 src에다가 지정하면 됩니다.

axios로 받아온 이미지를 보이게 하는 법

1개의 답변

Q&A 목록