Как победить кеш браузера после загрузки новой картинки?
Всем привет! Пользователь загружает аватар через ajax, при этом имя файла на сервере не меняется. Как в этом случае сделать так, чтобы после замены изображения бралось не из кеша, а с сервера?
Добавлять в конец имени файла случайные циферки.
img.png?352637362
Динамически менять содержимое src img на новый url, можно даже целиком поменять тег img с помощью innerHTML
Если выдача изображения осуществляется динамически допустим с помощью php то пожно прописать перед выдачей заголовки header(отмена кэширования);
Дописывать версию в query - это плохая практика из-за того, что некоторые кэширующие прокси-серверы не будут кэшировать подобные файлы. Правильнее всего записывать версию в названии файла, например, img/avatar-v2.png
terron: вопрос ТС был в том, как сделать так, чтобы при обновлении фотографии - фото бралось не из кеша браузера - а из сервера, не меняя при этом название файла. решение - дописывать после файла какое либо значение. я просто для примера написал ver. я к тому что это нормальная практика. тут тостер в авартарках к примеру пишет refresh значение. data3.floomby.com/files/share/30_10_2016/20/kpPma4...
terron: но в таком случае изменится и адрес самой картинки, что неприемлимо, ведь каждая измененная картинка это ответ 404 для старой.
Конечно, в случае с аватарами это не важно, но если вопрос будет стоять про обычные изображения на сайте
Евгений: ну тогда пиши как предложили выше - рандомное значение, которое нигде хранить не придется. я к тому что - главное пиши. что угодно пиши, чтобы браузер думал что url поменялся
iBird Rose: Да, но браузер считает image.jpg одной картинкой, а image.jpg?546 другой. Следовательно и кеширует каждую. Т.е. перейдя на станицу комментариев , аватар отображается старый
Евгений: так после того как юзер сменил аватар - ты должен во всех местах где отображается аватар сделать image.jpg?546, если юзер еще раз сменит - сделать другие цифры. и так далее.
Евгений: не будет никаких 404 и не надо ничего хранить в БД, если не делать версионирование обязательным.
Например, есть у нас логотип сайта - /assets/img/logo.png. Можно в .htaccess или nginx настроить так, чтобы в папке assets у файлов обрезалась часть, отвечающая за версию файла. Таким образом /assets/img/logo-v2.png и /assets/img/logo-v1241231231254.png будут указывать на тот же файл, что и /assets/img/logo.png, при этом в БД мы ничего не храним, а на сервере храним только один файл с именем logo.png. Высчитывать версию вы можете как угодно (например, через таймштамп последнего изменения файла) или просто указывать ее вручную.
Евгений: тобишь ты решил что менять картинку будет профитнее, нежели вообще ничего не трогать и просто в url добавлять цифры? ты кажется как то не так делаешь. ты должен после обновления пользователем картинки - поменять все url на те что с цифрами после картинки. в самой БД, а не просто на той странице где произошло обновление картинки. тогда ты получишь то что ты хочешь. и такая практика точно рабочая. и так реально делают. прям вот на этой странице на тостере открой DevTools в бразуере и посмотри на свою аву.
Евгений: либо так, либо через манифест (как, например, делает PHP-фреймворк Laravel). Но так делают только со статикой.
Не стоит делать как вам говорит хам выше, и уж тем более брать Тостер за образец хорошего и качественного с точки лучших практик сайта. Для хранения динамических ассетов, например, аватарок, следует давать им зашифрованные через MD5 или любым другим способом имена и в таком виде хранить на сервере. Например, md5(ID пользователя + '_' + дата загрузки аватарки).png. В базе данных с пользователями храните этот самый MD5 или дату загрузки аватарки и отдавайте пользователю ссылки на аватарки примерно так: /assets/img/avatars/202cb962ac59075b964b07152d234b70.png. Можете даже кэширование без страха на полвека включать, потому что если пользователю загрузит новую аватарку, то MD5 изменится.
