PHP lib를 사용하여 이미지를 생성합니다.
때때로 브라우저는 새로 생성 된 파일을로드하지 않습니다.
내가 동적으로 생성 한 이미지에 대해서만 캐시를 비활성화하려면 어떻게해야합니까?
참고 : 시간이 지남에 따라 생성 된 이미지에 동일한 이름을 사용해야합니다.
답변
해킹처럼 느껴지지만 이식성이 뛰어난이 문제에 대한 일반적이고 간단한 해결책은 동적 이미지에 대한 각 요청에 무작위로 생성 된 쿼리 문자열을 추가하는 것입니다.
예를 들어-
<img src="image.png" />될 것이다
<img src="image.png?dummy=8484744" />또는
<img src="image.png?dummy=371662" />웹 서버 관점에서는 동일한 파일에 액세스하지만 브라우저 관점에서는 캐싱을 수행 할 수 없습니다.
난수 생성은 페이지를 제공 할 때 서버 (페이지 자체가 캐시되지 않았는지 확인) 또는 클라이언트 (JavaScript 사용)에서 발생할 수 있습니다.
웹 서버가이 트릭에 대처할 수 있는지 확인해야합니다.
답변
브라우저 캐싱 전략은 HTTP 헤더로 제어 할 수 있습니다. 그들은 단지 힌트 일 뿐이라는 것을 기억하십시오. 브라우저는이 필드와 다른 필드에서 매우 일관성이 없기 때문에 다양한 브라우저에서 원하는 효과를 얻으려면 여러 헤더가 필요합니다.
header ("Pragma-directive: no-cache");
header ("Cache-directive: no-cache");
header ("Cache-control: no-cache");
header ("Pragma: no-cache");
header ("Expires: 0");답변
자바 스크립트를 사용하여 브라우저에서 동적으로 수행해야하는 경우 다음 예가 있습니다.
<img id=graph alt=""
src="http://www.kitco.com/images/live/gold.gif"
/>
<script language="javascript" type="text/javascript">
var d = new Date();
document.getElementById("graph").src =
"http://www.kitco.com/images/live/gold.gif?ver=" +
d.getTime();
</script>답변
솔루션 1은 좋지 않습니다. 작동하지만 이미지 파일 끝에 해키 랜덤 또는 타임 스탬프 쿼리 문자열을 추가하면 이미지가 변경되었는지 여부에 관계없이 페이지가로드 될 때마다 브라우저가 모든 이미지의 모든 버전을 다시 다운로드하고 캐시합니다. 서버에서.
솔루션 2는 쓸모가 없습니다. nocache이미지 파일에 헤더를 추가 하는 것은 구현하기가 매우 어려울뿐만 아니라 미래의 어느 시점에서 변경 될 수 있다고 생각되는 이미지를 처음로드 할 때 미리 필요한시기 를 예측 해야하기 때문에 완전히 비실용적 입니다. .
Etags 입력 …
이 문제를 해결하는 가장 좋은 방법 은 이미지 디렉토리 의 .htaccess 파일 내에서 ETAGS 를 사용 하는 것 입니다. 다음은 Apache에게 이미지 파일 헤더의 브라우저에 고유 한 해시를 보내도록 지시합니다. 이 해시는 이미지 파일이 수정 될 때만 변경되며이 변경은 브라우저가 다음에 이미지를 요청할 때 이미지를 다시로드하도록 트리거합니다.
<FilesMatch "\.(jpg|jpeg)$">
FileETag MTime Size
</FilesMatch>답변
나는 모든 대답을 확인했고 가장 좋은 것은 (그렇지 않은) 것 같았습니다.
<img src="image.png?cache=none">처음에.
그러나 cache = none 을 추가하면 매개 변수 (정적 “none”단어)를 추가하면 아무 영향도주지 않고 브라우저는 여전히 캐시에서로드됩니다.
이 문제에 대한 해결책은 다음과 같습니다.
<img src="image.png?nocache=<?php echo time(); ?>">기본적으로 유닉스 타임 스탬프를 추가하여 매개 변수를 동적으로 만들고 캐시없이 만들었습니다.
그러나 내 문제는 약간 달랐습니다. 즉석에서 생성 된 PHP 차트 이미지를로드하고 $ _GET 매개 변수로 페이지를 제어했습니다. URL GET 매개 변수가 동일하게 유지 될 때 캐시에서 이미지를 읽고 GET 매개 변수가 변경 될 때 캐시하지 않기를 원했습니다.
이 문제를 해결하려면 $ _GET을 해시해야했지만 여기에 배열이기 때문에 해결책이 있습니다.
$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";편집하다 :
위의 솔루션은 잘 작동하지만 파일이 변경 될 때까지 캐시 된 버전을 제공하고 싶을 때가 있습니다. (위의 솔루션을 사용하면 해당 이미지에 대한 캐시가 완전히 비활성화됩니다.) 따라서 브라우저에서 캐시 된 이미지를 제공하려면 이미지 파일 사용이 변경 될 때까지 다음과 같이하십시오.
echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";filemtime ()은 파일 수정 시간을 가져옵니다.
답변
이 주제가 오래되었다는 것을 알고 있지만 Google에서 순위가 매우 높습니다. 나는 이것을 헤더에 넣는 것이 잘 작동한다는 것을 알았습니다.
<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">답변
나는 이것에 대한 해결책을 찾고 있었고 위의 대답은 내 경우에는 효과가 없었습니다 (그리고 그들에 대해 언급할만한 평판이 충분하지 않습니다). 적어도 내 사용 사례와 내가 사용하고있는 브라우저 (OSX의 Chrome)에서 캐싱을 막는 유일한 방법은 다음과 같습니다.
Cache-Control = 'no-store'완전성을 위해 저는 이제 ‘no-cache, no-store, must-revalidate’3 가지를 모두 사용하고 있습니다.
그래서 제 경우에는 (Python의 Flask에서 동적으로 생성 된 이미지를 제공) 가능한 한 많은 브라우저에서 작업하기 위해 다음을 수행해야했습니다.
def make_uncached_response(inFile):
response = make_response(inFile)
response.headers['Pragma-Directive'] = 'no-cache'
response.headers['Cache-Directive'] = 'no-cache'
response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
response.headers['Pragma'] = 'no-cache'
response.headers['Expires'] = '0'
return response