[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도 변경됩니다. 그러나 이것은 사이트 전체에서 많은 변경이 필요하며 더 나은 솔루션이 있다면 오히려 그렇게하지 않습니다. 또한 업로드 된 새 이미지의 이름이 같은 경우에도 여전히 작동하지 않습니다 (예 : 이미지가 약간 포토샵되고 다시 업로드 된 경우).

답변

<img src="picture.jpg?1222259157.415" alt="">

<img src="foo.cgi?random=323527528432525.24234" alt="">

Cache-Control: no-cache

echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />";

<img src="picture.jpg?20130910043254">

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

    $(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();
}

<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();
}

<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">