[html] 웹 브라우저가 이미지를 캐시하지 않도록 강제하는 방법
배경
저는 두 개의 pro-bono 웹 사이트에 대해 매우 간단한 CGI 기반 (Perl) 콘텐츠 관리 도구를 작성하고 사용하고 있습니다. 웹 사이트 관리자에게 이벤트에 대한 HTML 양식을 제공하여 필드 (날짜, 장소, 제목, 설명, 링크 등)를 채우고 저장합니다. 이 양식에서 관리자는 이벤트와 관련된 이미지를 업로드 할 수 있습니다. 양식을 표시하는 HTML 페이지에서 업로드 된 사진 (HTML img 태그)의 미리보기도 표시합니다.
문제
관리자가 사진을 변경하려고 할 때 문제가 발생합니다. 그는 “찾아보기”버튼을 누르고 새 사진을 선택한 다음 확인을 누르면됩니다. 그리고 이것은 잘 작동합니다.
이미지가 업로드되면 내 백엔드 CGI가 업로드를 처리하고 양식을 올바르게 다시로드합니다.
문제는 표시된 이미지 가 새로 고쳐 지지 않는다는 것 입니다. 데이터베이스가 올바른 이미지를 보유하더라도 이전 이미지는 계속 표시됩니다. 웹 브라우저에서 이미지가 캐시된다는 사실로 범위를 좁혔습니다. 관리자가 Firefox / Explorer / Safari에서 RELOAD 버튼을 누르면 모든 것이 정상적으로 새로 고쳐지고 새 이미지가 나타납니다.
내 솔루션-작동하지 않음
아주 먼 과거의 날짜로 HTTP Expires 명령을 작성하여 캐시를 제어하려고합니다.
Expires: Mon, 15 Sep 2003 1:00:00 GMT
나는 관리 측에 있고 페이지가 항상 만료되기 때문에 페이지를로드하는 데 조금 더 오래 걸리는지 신경 쓰지 않는다는 것을 기억하십시오.
그러나 이것도 작동하지 않습니다.
노트
이미지를 업로드 할 때 파일 이름은 데이터베이스에 보관되지 않습니다. Image.jpg 로 이름이 변경되었습니다 (사용할 때 간단히 표시). 기존 이미지를 새 이미지로 바꿀 때 이름도 변경되지 않습니다. 이미지 파일의 내용 만 변경됩니다.
웹 서버는 호스팅 서비스 / ISP에서 제공합니다. Apache를 사용합니다.
질문
웹 브라우저가 이미지가 아닌이 페이지의 항목을 캐시하지 않도록 강제하는 방법이 있습니까?
저는 데이터베이스와 함께 실제로 “파일 이름을 저장”하는 옵션을 사용하고 있습니다. 이렇게하면 이미지가 변경되면 IMG 태그의 src도 변경됩니다. 그러나 이것은 사이트 전체에서 많은 변경이 필요하며 더 나은 솔루션이 있다면 오히려 그렇게하지 않습니다. 또한 업로드 된 새 이미지의 이름이 같은 경우에도 여전히 작동하지 않습니다 (예 : 이미지가 약간 포토샵되고 다시 업로드 된 경우).
답변
Armin Ronacher는 올바른 아이디어를 가지고 있습니다. 문제는 임의의 문자열이 충돌 할 수 있다는 것입니다. 다음을 사용합니다.
<img src="picture.jpg?1222259157.415" alt="">
여기서 “1222259157.415”는 서버의 현재 시간입니다.
Javascript performance.now()
또는 Python으로 시간 생성time.time()
답변
간단한 수정 : 이미지에 임의의 쿼리 문자열을 첨부합니다.
<img src="foo.cgi?random=323527528432525.24234" alt="">
HTTP RFC의 내용 :
Cache-Control: no-cache
그러나 그것은 잘 작동하지 않습니다. 🙂
답변
나는 사용한다 PHP의 파일 수정 시간 기능을 예를 들어 :
echo <img src='Images/image.png?" . filemtime('Images/image.png') . "' />";
이미지를 변경하면 수정 된 타임 스탬프가 다르기 때문에 캐시 된 이미지가 아닌 새 이미지가 사용됩니다.
답변
다음을 사용합니다.
<img src="picture.jpg?20130910043254">
여기서 “20130910043254”는 파일의 수정 시간입니다.
이미지를 업로드 할 때 파일 이름은 데이터베이스에 보관되지 않습니다. Image.jpg로 이름이 변경되었습니다 (사용할 때 간단히 표시). 기존 이미지를 새 이미지로 바꿀 때 이름도 변경되지 않습니다. 이미지 파일의 내용 만 변경됩니다.
나는 두 가지 유형의 간단한 해결책이 있다고 생각합니다. 1) 먼저 떠오르는 것 (생각하기 쉽기 때문에 간단한 해결책), 2) 생각한 후에 끝나는 것 (쉽기 때문에 사용하다). 분명히 생각하기로 선택하면 항상 이익을 얻는 것은 아닙니다. 그러나 두 번째 옵션은 다소 과소 평가 된 것 같습니다. 왜 php
그렇게 인기가 있는지 생각해보십시오 .)
답변
사용 클래스 = “NO-CACHE”없다
샘플 HTML :
<div>
<img class="NO-CACHE" src="images/img1.jpg" />
<img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>
jQuery :
$(document).ready(function ()
{
$('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
});
자바 스크립트 :
var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
nods[i].attributes['src'].value += "?a=" + Math.random();
}
결과 : src = “images / img1.jpg” => src = “images / img1.jpg? a = 0.08749723793963926”
답변
이미지 제공을위한 프록시 스크립트를 작성할 수 있습니다. 그래도 작업이 조금 더 많습니다. 뭔가 좋아합니다 :
HTML :
<img src="image.php?img=imageFile.jpg&some-random-number-262376" />
스크립트:
// PHP
if( isset( $_GET['img'] ) && is_file( IMG_PATH . $_GET['img'] ) ) {
// read contents
$f = open( IMG_PATH . $_GET['img'] );
$img = $f.read();
$f.close();
// no-cache headers - complete set
// these copied from [php.net/header][1], tested myself - works
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
// image related headers
header('Accept-Ranges: bytes');
header('Content-Length: '.strlen( $img )); // How many bytes we're going to send
header('Content-Type: image/jpeg'); // or image/png etc
// actual image
echo $img;
exit();
}
실제로 이미지 src의 캐시가없는 헤더 또는 임의의 숫자만으로도 충분하지만, 방탄이되고 싶기 때문에 ..
답변
저는 새로운 Coder이지만 브라우저가 내 웹캠 뷰를 캐싱하고 유지하는 것을 막기 위해 다음과 같이 생각해 냈습니다.
<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">
어떤 브라우저에서 작동하는지 확실하지 않지만 일부에서는 작동합니다. IE : 웹 페이지를 새로 고칠 때와 웹 사이트를 다시 방문 할 때 (새로 고침없이) 작동합니다. CHROME : 웹 페이지를 새로 고침 할 때만 작동합니다 (다시 방문한 후에도). SAFARI 및 iPad : 작동하지 않습니다. 기록 및 웹 데이터를 삭제해야합니다.
SAFARI / iPad에 대한 아이디어가 있습니까?