Как победить кеш браузера после загрузки новой картинки?

Question

[Алексей]

Всем привет! Пользователь загружает аватар через ajax, при этом имя файла на сервере не меняется. Как в этом случае сделать так, чтобы после замены изображения бралось не из кеша, а с сервера?

Answer 1

[T_y_l_e_r]

Добавлять в конец имени файла случайные циферки.
img.png?352637362
Динамически менять содержимое src img на новый url, можно даже целиком поменять тег img с помощью innerHTML
Если выдача изображения осуществляется динамически допустим с помощью php то пожно прописать перед выдачей заголовки header(отмена кэширования);

Comments

[Алексей]

Я пробовал добавлять случайные цифры, но на этой странице картинка перегружается, а вот если её обновить, то опять видна старая картинка.

Answer 2

[iBird Rose]

путь к изображению менять все равно придется. к примеру хорошая практика писать в виде img/avatar.png?ver-2

Comments

[Petr Flaks]

Дописывать версию в query - это плохая практика из-за того, что некоторые кэширующие прокси-серверы не будут кэшировать подобные файлы. Правильнее всего записывать версию в названии файла, например, img/avatar-v2.png

[Алексей]

если так делать, то в базе придется хранить и номер версии картинки. Это не очень удобно

[iBird Rose]

terron: вопрос ТС был в том, как сделать так, чтобы при обновлении фотографии - фото бралось не из кеша браузера - а из сервера, не меняя при этом название файла. решение - дописывать после файла какое либо значение. я просто для примера написал ver. я к тому что это нормальная практика. тут тостер в авартарках к примеру пишет refresh значение. data3.floomby.com/files/share/30_10_2016/20/kpPma4...

[Алексей]

terron: но в таком случае изменится и адрес самой картинки, что неприемлимо, ведь каждая измененная картинка это ответ 404 для старой.
Конечно, в случае с аватарами это не важно, но если вопрос будет стоять про обычные изображения на сайте

[iBird Rose]

Евгений: ну тогда пиши как предложили выше - рандомное значение, которое нигде хранить не придется. я к тому что - главное пиши. что угодно пиши, чтобы браузер думал что url поменялся

[Алексей]

iBird Rose: Да, но браузер считает image.jpg одной картинкой, а image.jpg?546 другой. Следовательно и кеширует каждую. Т.е. перейдя на станицу комментариев , аватар отображается старый

[iBird Rose]

Евгений: так после того как юзер сменил аватар - ты должен во всех местах где отображается аватар сделать image.jpg?546, если юзер еще раз сменит - сделать другие цифры. и так далее.

[Petr Flaks]

Евгений: не будет никаких 404 и не надо ничего хранить в БД, если не делать версионирование обязательным.

Например, есть у нас логотип сайта - /assets/img/logo.png. Можно в .htaccess или nginx настроить так, чтобы в папке assets у файлов обрезалась часть, отвечающая за версию файла. Таким образом /assets/img/logo-v2.png и /assets/img/logo-v1241231231254.png будут указывать на тот же файл, что и /assets/img/logo.png, при этом в БД мы ничего не храним, а на сервере храним только один файл с именем logo.png. Высчитывать версию вы можете как угодно (например, через таймштамп последнего изменения файла) или просто указывать ее вручную.

[Алексей]

terron: Спасибо, вроде понял, но это рабочая практика? Так реально делают?

[iBird Rose]

Евгений: тобишь ты решил что менять картинку будет профитнее, нежели вообще ничего не трогать и просто в url добавлять цифры? ты кажется как то не так делаешь. ты должен после обновления пользователем картинки - поменять все url на те что с цифрами после картинки. в самой БД, а не просто на той странице где произошло обновление картинки. тогда ты получишь то что ты хочешь. и такая практика точно рабочая. и так реально делают. прям вот на этой странице на тостере открой DevTools в бразуере и посмотри на свою аву.

[Petr Flaks]

Евгений: либо так, либо через манифест (как, например, делает PHP-фреймворк Laravel). Но так делают только со статикой.

Не стоит делать как вам говорит хам выше, и уж тем более брать Тостер за образец хорошего и качественного с точки лучших практик сайта. Для хранения динамических ассетов, например, аватарок, следует давать им зашифрованные через MD5 или любым другим способом имена и в таком виде хранить на сервере. Например, md5(ID пользователя + '_' + дата загрузки аватарки).png. В базе данных с пользователями храните этот самый MD5 или дату загрузки аватарки и отдавайте пользователю ссылки на аватарки примерно так: /assets/img/avatars/202cb962ac59075b964b07152d234b70.png. Можете даже кэширование без страха на полвека включать, потому что если пользователю загрузит новую аватарку, то MD5 изменится.

Answer 3

[Валерий]

Правильный путь - добавлять псевдослучайный код к файлу. Таймштамп, например.

На отображение это не повлияет, но браузер каждый раз будет считать, что грузится НОВОЕ фото.

Например, image.png?t=12328736467536