Vue 프로젝트에서 API를 호출해 이미지를 변경할 때, 동일한 이미지 URL을 사용하는 경우가 있습니다
이러한 경우 이전 이미지가 캐시되어 남아있는 문제가 발생할 수 있습니다.
예를들어 과거 프로젝트에서는 /img/[userId] 형식의 URL을 사용하였습니다. 이 경우 이미지를 변경했으나, URL이 동일하여 캐시된 이미지가 남아있는 상황이 발생했습니다.
이를 해결하기 위해, ${imageUrl}?timestamp=${Date.now()} 형식으로 URL에 타임스탬프를 추가했습니다.
이를 통해 매번 새로운 이미지 URL이 생성되어, 캐시된 이미지가 아닌 최신 이미지를 불러올 수 있게 되었습니다.
결론적으로,이미지 변경전 URL과 변경후 URL이 동일하면 캐싱 이슈가 발생할 수 있으므로 주의가 필요합니다!
Nov 2, 2024
Views 36