Ответы:
Распространенное и простое решение этой проблемы, которое выглядит как взлом, но довольно переносимо, - это добавлять случайно сгенерированную строку запроса к каждому запросу динамического изображения.
Так, например -
<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");Если вам нужно сделать это динамически в браузере с помощью javascript, вот пример ...
<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 в каталоге изображений. Следующее указывает 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(); ?>">где вы в основном добавляете временную метку unix, чтобы сделать параметр динамическим и без кеша, это сработало.
Однако моя проблема была немного другой: я загружал на лету сгенерированное изображение 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">Я просто искал решение этой проблемы, и приведенные выше ответы не сработали в моем случае (и у меня недостаточно репутации, чтобы комментировать их). Оказывается, что, по крайней мере, для моего варианта использования и браузера, который я использовал (Chrome на OSX), единственное, что, казалось, могло предотвратить кеширование, это:
Cache-Control = 'no-store'Для полноты картины я сейчас использую все три из следующих: «без кеширования, без хранения, с обязательной повторной проверкой»
Итак, в моем случае (обслуживание динамически сгенерированных изображений из Flask в Python) мне пришлось сделать следующее, чтобы, надеюсь, работать в максимально возможном количестве браузеров ...
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Решением является изменение источника изображения. Вы действительно можете сделать это, добавив к изображению метку времени или случайное число.
Лучше было бы добавить контрольную сумму, например, данных, которые представляет изображение. Это позволяет кэшировать, когда это возможно.
Добавим еще одно решение в кучу.
Добавление уникальной строки в конце - идеальное решение.
example.jpg?646413154Следующее решение расширяет этот метод и обеспечивает как возможность кэширования, так и получение новой версии при обновлении изображения.
Когда изображение обновляется, время файла будет изменено.
<?php
$filename = "path/to/images/example.jpg";
$filemtime = filemtime($filename);
?>Теперь выведите изображение:
<img src="images/example.jpg?<?php echo $filemtime; ?>" >У меня была эта проблема, и я ее преодолеваю.
var newtags='<div class="addedimage"><h5>preview image</h5><img src="'+one+'?nocache='+Math.floor(Math.random() * 1000)+'"></div>';Я использовал это для решения своей аналогичной проблемы ... отображения счетчика изображений (от внешнего поставщика). Не всегда корректно обновлялось. И после добавления случайного параметра все работает нормально :)
Я добавил строку даты, чтобы обновлять ее хотя бы каждую минуту.
пример кода (PHP):
$output .= "<img src=\"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."\" alt=\"somecounter.com\" style=\"border:none;\">";Это приводит к srcссылке вроде:
http://xy.somecounter.com/?id=1234567890&1207241014Если у вас есть жестко запрограммированный URL-адрес изображения, например: http://example.com/image.jpg, вы можете использовать php для добавления заголовков к вашему изображению.
Сначала вам нужно будет заставить apache обрабатывать ваш jpg как php. Смотрите здесь: Можно ли выполнить PHP с расширением file.php.jpg?
Загрузите изображение (imagecreatefromjpeg) из файла, затем добавьте заголовки из предыдущих ответов. Используйте заголовок функции php, чтобы добавить заголовки.
Затем выведите изображение с помощью функции imagejpeg.
Обратите внимание, что разрешать php обрабатывать изображения jpg очень небезопасно. Также имейте в виду, что я не тестировал это решение, поэтому вам решать, как заставить его работать.
Просто отправьте одно место заголовка.
Мой сайт содержит одно изображение, и после загрузки изображения оно не меняется, затем я добавляю этот код:
<?php header("Location: pagelocalimage.php"); ?>Работает для меня.