Sangil's blog

웹개발 중에 브라우저의 이미지 캐싱 때문에 애를 먹는 경우가 간혹 있습니다.

어? 왜 이 이미지 변경이 안되지? 이미지 변경이 잘 안됬나? 웅? 변경 잘됬는데 왜안되! 라는.. 경우가 가끔있는데요..저만그런가요 ㅎㅎ 

이럴경우 대부분이 웹브라우저의 캐쉬때문에 그렇습니다. (웹서버나, WAS상에서의 캐쉬도 있어요..^^)

이를 확인하기 위해선 개발자도구에서 Network를 보면 되는데요. 가령 <img src="www.sang12.co.kr/a.jpg" /> 가 있다면 웹브라우저는 초기에 해당 이미지를 서버로부터 받아오게 됩니다. 그리고 다음번 호출 할 때는 해당 이미지가 브라우저 캐쉬에 저장 되어 있으므로 서버에 따로 요청하지 않고 자기가 가지고 있는 이미지를 보여주는 것이죠. 

하지만 서버에서 이미지가 변경 되었다면 어떻게 될까요? 웹브라우저는 이 사실을 모르겠죠. 그러니 서버의 이미지가 변경되어도 변경전의 이미지가 노출 될 수 밖에 없습니다.  물론 설정된 시간이 지나거나 하면 다시 이미지를 서버로부터 받아오니 변경된게 반영이 되겠지만, 사용자가 이미지를 변경했는데도 변경된게 반영이 안된 모습을 보여주면.. 당연히 사용자는 오류로 생각  하겠죠.

그럴 경우에는 header에 특정 값을 추가하여 웹브라우저에게 이미지를 캐슁하지마라고 알려 줄 수도 있고, 이미지 src주소 뒤에 ?특정값 을 추가해줌으로써 웹브라우저에게 캐슁된 이미지를 계속 사용하지말고 서버에 계속 물어보게끔 만들어 줄 수도 있습니다.

1. header에 mteta 태그 추가

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

2. jsp response값에 no-cache 적용

<%
 response.setHeader("Cache-Control","no-cache");
 response.setHeader("Pragma","no-cache");
 response.setDateHeader("Expires",0);
%>

 var path = "imgUrl" + "?" +Date.now();
 $("#img").attr('src', path);