이미지가 붙어 붙어있다/브라우저가 캐싱 한 CSS

Question

내 웹 페이지에 백 엔드에서 업데이트하는 일부 이미지가 있습니다. 그러나 직접 반영되지 않는 이미지는 사용자가 ctr + F5를 할 필요가 있음을 의미합니다. 그것은 클라이언트의 브라우저가 해당 이미지를 캐시했음을 의미합니다. thay가 업데이트되면 업데이트 된 이미지, JS, CSS를 다시로드 할 수 있습니까?

나는 내 편에서 무엇을 시도해 본다.

ETag 

나는 나를 위해 작동하지 않았다. 내 페이지 헤더

<meta http-equiv="Expires" CONTENT="-1" ></meta> 

<meta http-equiv="cache-control" content="no-cache"></meta> 

<meta http-equiv="Pragma" CONTENT="no-cache"></meta> 

그러나 같은 결과에

추가 된 다음 태그. JS 작동

ExpiresActive on 
ExpiresByType application/javascript "access plus 0 seconds" 
ExpiresByType image/jpg "access plus 0 seconds" 
ExpiresByType image/jpeg "access plus 0 seconds" 
ExpiresByType image/gif "access plus 0 seconds" 
ExpiresByType image/png "access plus 0 seconds" 
ExpiresByType text/css "access plus 0 seconds" 

위 구성 아파치

에서

추가 된 다음과 같은 구성. 그러나 이미지에 직면 한 문제. 너무 많은 코드 변경과 테스트가 필요한 url/image 이름 끝에 토큰 번호 또는 버전 번호를 추가 할 수 없습니다. 캐싱에서 이미지를 제한하는 다른 중앙 집중식 방법이 있습니까?

감사합니다.

Answer 1

이미지의 src를 변경하려면 javascript를 사용하면 이름이 변경되고 브라우저가 다시로드됩니다.

예 :

document.getElementById('myimg').src = document.getElementById('myimg').src + '?r=' + Math.random(); 

하지 깨끗한 해결책하지만이 옵션이 제한된 것 같다.

당신이 시도 할 수 jQuery로 전체 페이지 이미지를 다시로드하려면 : 당신이 모든 것을 다시로드 끝나지 않도록 초기 선택을 수정하여

$('img').each(function() { 
    $(this).attr('src', $(this).attr('src') + '?r=' + Math.random()) 
}); 

는 당신이 영역으로 제한 할 수 있습니다. css 스타일로 지정된 이미지에는 영향을 미치지 않습니다.