이미지 등록시 자동 등록 오류

Question

이미지 등록시에 아래 사진과 같이 이미지가 리스트에 등록이 되긴하는데 이미지 형태가 깨져서 등록이 됩니다. 새로고침을 해야 정상적으로 반영되는 오류가 있는데 어느 코드가 잘못된지를 모르겠습니다ㅠㅠ

https://github.com/jjeongdong/ImageUpload_front

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 지원님, 이미지 등록 시 형태가 깨지는 문제는 여러 원인으로 인해 발생할 수 있습니다. 문제 해결을 위해서는 몇 가지 점을 확인해보시는 것이 좋습니다. 이미지가 서버에 올라간 후 URL이 제대로 생성되고 클라이언트에 반환되는지 확인하세요. 클라이언트에서 이미지 URL을 받아서 렌더링할 때 캐시로 인해 바로 업데이트되지 않을 수 있습니다. 이미지 URL 뒤에 타임스탬프나 랜덤 쿼리스트링을 붙여서 매번 새로운 URL로 인식하게 할 수 있습니다. 이미지 로드를 완료하기 전에 렌더링이 시도되는 경우, 이미지가 완전히 로드될 때까지 기다린 후에 렌더링 되도록 코드를 수정하실 수 있습니다. 위 방법을 시도해보시고 문제가 계속된다면, 이미지를 처리하는 server-side 로직과 client-side 코드를 상세히 검토해보셔야 할 것 같습니다. 이미지를 다루는 부분의 코드를 다시 한번 꼼꼼히 살펴보시고, 필요하다면 콘솔 로그를 통해 변수의 상태를 확인하거나 네트워크 탭을 통해 요청과 응답을 확인하는 것도 도움이 될 수 있습니다. 링크하신 깃허브 저장소 코드에 직접적으로 언급한 내용이 없어 구체적인 해결 방안을 제시하기는 어렵지만, 기본적인 접근 방법을 시도해보시기 바랍니다. 문제 해결에 도움이 되었으면 좋겠습니다.