Есть ли способ заставить браузеры обновлять / загружать изображения?

Добавьте строку запроса с произвольным уникальным номером (или временем, или номером версии и т. Д.):

<img src="image.png?80172489074" alt="a cool image" />

Это приведет к новому запросу из-за другого URL-адреса.

Это сложно. Вы действительно хотите, чтобы изображения кешировались, но тогда вы не хотите кэшировать их, когда появятся новые:

• Использование заголовка expires с датой в прошлом предотвращает кеширование. Плохой
• Добавление параметра «перебор кеша» 342038402 может решить проблему, но также может предотвратить кэширование изображения, чего вы не хотите. Плохой.
• Лучше использовать заголовок expires с коротким (скажем, 1 час) истечением ... через час пользователь увидит изображение, но вашему веб-серверу не придется обслуживать его каждый раз. Компромисс, а в какое время работает? Не совсем осуществимо.

Решение? Я могу придумать два хороших варианта:

• Изучите eTags и свою способность их использовать. Они предназначены для этой ситуации. Браузер явно спросит ваш сервер, актуален ли файл или нет. Вы можете просто включить это в apache, если у вас его еще нет.
• Создайте новый URL-адрес для каждого нового изображения (и используйте заголовок с истекшим сроком действия в далеком будущем). Это то, над чем вы работаете.

Мое любимое PHP-решение:

<img src="<?php echo "image.jpg" . "?v=" . filemtime("image.jpg"); ?>" />

каждое изменение файла создает новую версию файла

Добавьте текущую дату и время к src изображения:

<img src="yourImage.png?v=<?php echo Date("Y.m.d.G.i.s")?>" />

Вы можете поместить http-equiv в тег <meta>, который укажет браузеру не использовать кеш (или даже лучше - использовать его определенным образом), но лучше настроить сервер для отправки правильных заголовков http cache. Прочтите статью о кешировании.

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

вы можете управлять поведением кеша, играя с заголовками HTTP.

установка заголовка expires в прошлом заставит браузер не использовать кешированную версию.

Expires: Sat, 26 Jul 1997 05:00:00 GMT

Дополнительную информацию можно найти в RFC.

Если вы посмотрите на данные, которыми обмениваются ваш браузер и сервер, вы увидите, что браузер отправляет HTTP-запрос HEAD для изображений. Результат будет содержать время модификации (но не фактические данные изображения). Убедитесь, что это время изменилось, если изображение изменилось на сервере и браузер должен снова загрузить изображение.

в PHP вы можете использовать этот трюк

<img src="image.png?<?php echo time(); ?>" />

Функция time () показывает текущую отметку времени. Каждая страница загружается по-разному. Таким образом, этот код обманывает браузер: он читает другой путь и «думает», что изображение изменилось с тех пор, как пользователь посетил сайт в последний раз. И он должен его повторно загрузить, а не использовать кеш-память.

Иди в случайном порядке. Просто используйте какое-нибудь случайное число и добавьте его к имени файла изображения.

<img src="image.jpg?<?=rand(1,1000000)?>">

Еще одно мощное решение:

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

Это напечатает «отметку времени последней модификации» на пути.

Новая версия -> Скачать новое изображение

Та же версия -> Взять кеш

В PHP вы можете отправить случайное число или текущую отметку времени:

<img src="image.jpg?<?=Date('U')?>">

or

<img src="image.jpg?<?=rand(1,32000)?>">

Похоже, проблема больше в том, что основной пользователь видит свое новое изображение, чем в том, что кеш полностью отключен? В этом случае вы можете сделать следующее:

var headers = new Headers()
headers.append('pragma', 'no-cache')
headers.append('cache-control', 'no-cache')

var init = {
  method: 'GET',
  headers: headers,
  mode: 'no-cors',
  cache: 'no-cache',
}

fetch(new Request('path/to.file'), init)

Если вы сделаете это после загрузки нового изображения, браузер должен увидеть эти заголовки и позвонить в серверную часть, пропуская кеш. Новое изображение теперь находится в кеше по этому URL-адресу. Основной пользователь увидит новое изображение, но вы по-прежнему сохраните все преимущества кэширования. Любой другой, просматривающий это изображение, увидит обновления примерно через день после того, как их кеш станет недействительным.

Если бы вы больше заботились о том, чтобы все пользователи видели самую последнюю версию, вы бы захотели использовать одно из других решений.

Я столкнулся с этой проблемой несколько раз назад. И я получал данные через JSON в AJAX. Я просто добавил функцию Javascript Math.random (), и она отлично сработала. Бэкэнд, который я использовал, был флягой.

<img class="card-img-top w-100 d-block" style="padding:30px;height:400px" src="static/img/${data.image}?${Math.random()} ">

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

 <td><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td>