Как очистить или заменить кэшированное изображение

Причина, по которой используется трюк с ?x=timestamp, заключается в том, что это единственный способ сделать это для каждого изображения в отдельности. Либо же можно динамически генерировать имена изображений и настраивать приложение, которое выводит изображение.

Я рекомендую вам на стороне сервера выяснить, было ли изображение изменено или обновлено. Если это так, то выводите тег с ?x=timestamp, чтобы принудительно загрузить новое изображение.

Если вы динамически формируете страницу, вы можете добавить метку времени последнего изменения к URL:

<img src="image.jpg?lastmod=12345678" ...

Таким образом, вы будете уверены, что браузер будет загружать актуальную версию изображения, а не кэшированную. Не забудьте заменить 12345678 на фактическое время последнего изменения в формате, который вам подходит, например, таймстемп UNIX.

<meta> теги абсолютно неуместны для управления кэшированием. На самом деле, не стоит пытаться использовать их для этой цели, так как на момент, когда что-то считывает содержимое документа, оно уже закэшировано.

В HTTP каждый URL независим. Что бы вы ни делали с HTML-документом, это не повлияет на изображения.

Для управления кэшированием вы можете изменить URL каждое время, когда содержимое меняется. Если вы обновляете изображения время от времени, позвольте им кэшироваться на неопределенный срок и используйте новое имя файла (с версией, хешем или датой) для нового изображения — это лучшее решение для файлов с длительным сроком жизни.

Если ваше изображение меняется очень часто (каждые несколько минут или даже при каждом запросе), тогда можно отправлять Cache-control: no-cache или Cache-control: max-age=xx, где xx — это количество секунд, в течение которых изображение считается "свежим".

Случайный URL для файлов краткосрочного использования — плохая идея. Это загрязняет кэши бесполезными файлами и заставляет полезные файлы удаляться быстрее.

Если у вас есть Apache и включены mod_headers или mod_expires, вы можете создать файл .htaccess с соответствующими правилами:

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

Вышеуказанное сделает файлы *-nocache.jpg не кэшируемыми.

Вы также можете обслуживать изображения через PHP-скрипт (по умолчанию у них ужасные параметры кэширования 😉.

Вы можете изменить URL изображения, добавив случайную строку к параметрам запроса, следующим образом:

string imageUrl = "image1.jpg?" + DateTime.Now.ToString("ddMMyyyyhhmmsstt");

Этот код создает строку URL, которая включает в себя имя изображения и текущую дату и время в формате ддММггггччммсс, что также служит в качестве уникального идентификатора для кэширования. Таким образом, каждый раз, когда вы будете генерировать этот URL, он будет отличаться, что предотвратит использование кэшированного изображения браузером.

Если вам нужно добавить случайную строку (например, для еще большей уникальности), вы можете использовать Guid.NewGuid() для создания уникального идентификатора:

string imageUrl = "image1.jpg?" + Guid.NewGuid().ToString();

Таким образом, каждый запрос к изображению будет уникальным, и кэш браузера не будет прерываться.

Вы можете добавить случайное число к URL изображения, что фактически будет эквивалентно созданию новой версии этого изображения. Я реализовал аналогичную логику, и она работает отлично.

<script>
var num = Math.random();
var imgSrc = "image.png?v=" + num;
$(function() {
    $('#imgID').attr("src", imgSrc);
});
</script>

Таким образом, каждый раз, когда вы обновляете страницу, изображение будет загружаться заново, что предотвратит кэширование браузером.