Product게시판 이미지에 대해서

코드로 배우는 React with 스프링부트 API서버

Axios인터셉터와 AccessToken

작성

280

토큰적용 후 발생하는 현상에 대해서 질문드립니다.

Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다.

jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다.

이런경우 어떠한방식으로 처리하는게 좋을까요?

src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}

답변 2

저도 열심히 수업듣는 학생인데요

JWTCheckFilter에 저거 넣으니깐 저도 사진나오네요

감사합니다 ㅎㅎ

지식공유자

네.. 상품쪽은 강의에서 JWT가 처리되어야만 정상적으로 작동합니다. 예제에서는 로그인한 사용자들만이 상품관련 기능등을 사용할 수 있다고 가정했으니까요..

질문하신 내용은 서버에서 이미지 데이터를 가져오는데 뭔가 에러를 처리하고 싶은 상황이라고 생각하는데요..

그럼 Axios에서 BLOB데이터를 가지고 와서 이미지 태그를 생성하는 방식으로 처리하면 됩니다.

별도의 컴포넌트를 하나 만들어서

axios 의 repsonseType을 blob으로 지정하고 결과 데이터를 문자열로 저장한 후에 img의 src속성값으로 지정하는 방식입니다.

axios blob 라는 이름으로 검색하면 필요한 예제를 찾으실 수 있을 겁니다.

질문자

답변감사합니다. 에러처리에 대한 내용은 아니구요 '리덕스 툴킷'파트에서 Refresh 토큰을 이용한 Access 토큰 자동 갱신 회차까지 보았는데요 Product게시판으로 이동하면 이미지가 보이질 않아서 질문드려봤습니다.

지식공유자

JWTCheckFilter에 이미지 경로들은 패스할 수 있도록

//이미지 조회 경로는 체크하지 않는다면
if(path.startsWith("/api/products/view/")) {
  return true;
}

이 있는지 확인해 주세요

상품이 등록되면 upload 폴더 내에 저장되는데 폴더 내 파일들과 데이터베이스내에 상품 이미지 파일들이 존재해야 합니다.

상품이미지가 보이지 않는다면 '새 탭에서 이미지 열기'를 선택해서 경로를 확인해 주세요

해당 경로의 링크가

와 같은 방식으로 나오는지 확인하시고 upload폴더에 동일한 파일이 있는지를 확인해 주세요

인프런 커뮤니티 질문&답변