img 태그의 이미지가 변경되지 않을 때

 

 

img 태그를 이용하여 이미지를 넣을 때 웹에서 이미지가 변경되지 않는 경우가있다. 

 

같은 이름의 파일로 변경하거나 같은 주소의 이미지 파일로 변경할 경우 이미지가 변경되지 않는 경우가 발생하는데, 브라우저에 기존의 이미지가 캐시로 남아있어서 이런 문제가 발생한다.

 

<img id="itemImg" src="/img/shirt.jpg">

// 같은 이름의 다른 이미지 파일로 변경

<img id="itemImg" src="/img/shirt.jpg">

// 캐시 때문에 새로고침하지 않는 이상 이미지가 변경되지 않는다.

 

마찬가지로 스크립트로 src의 주소를 변경해도 동일한 이름이라면 이미지가 바뀌지 않는다.

이럴 경우 getTime( )을 이용하여 의미없는 숫자를 붙여서 이미지를 변경해준다.

 

<script>

var tmpDate = new Date();
 $("#itemImg").attr("src", "/img/shirt.jpg?"+tmeDate.getTime());

</script>


<img id="itemImg" src="/img/shirt.jpg">

 

/img/shirt.jpg 뒤에 의미없는 숫자가 붙게 되는데, 이미지 변경 시 매번 getTime( )로 다른 숫자가 붙게된다. 이렇게 되면 브라우저는 새로운 파일로 변경된것으로 인식하여 이미지가 변경된다.