Nonaktifkan cache untuk beberapa gambar

Saya menghasilkan beberapa gambar menggunakan PHP lib.

Terkadang browser tidak memuat file yang baru dibuat.

Bagaimana cara menonaktifkan cache hanya untuk gambar yang saya buat secara dinamis?

Catatan: Saya harus menggunakan nama yang sama untuk gambar yang dibuat dari waktu ke waktu.

Solusi umum dan sederhana untuk masalah ini yang terasa seperti retasan tetapi cukup portabel adalah dengan menambahkan string kueri yang dibuat secara acak ke setiap permintaan untuk gambar dinamis.

Jadi, misalnya -

<img src="image.png" />

Akan menjadi

<img src="image.png?dummy=8484744" />

Atau

<img src="image.png?dummy=371662" />

Dari sudut pandang server web, file yang sama diakses, tetapi dari sudut pandang browser tidak ada cache yang dapat dilakukan.

Pembuatan nomor acak dapat terjadi baik di server saat menyajikan halaman (cukup pastikan halaman itu sendiri tidak di-cache ...), atau di klien (menggunakan JavaScript).

Anda perlu memverifikasi apakah server web Anda dapat mengatasi trik ini.

Strategi cache browser dapat dikontrol oleh header HTTP. Ingatlah bahwa itu hanyalah petunjuk, sungguh. Karena browser sangat tidak konsisten dalam bidang ini (dan lainnya), Anda memerlukan beberapa header untuk mendapatkan efek yang diinginkan pada berbagai browser.

header ("Pragma-directive: no-cache");
header ("Cache-directive: no-cache");
header ("Cache-control: no-cache");
header ("Pragma: no-cache");
header ("Expires: 0");

Jika Anda perlu melakukannya secara dinamis di browser menggunakan javascript, berikut adalah contohnya ...

<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>

Solusi 1 tidak bagus.Itu berfungsi, tetapi menambahkan string kueri hacky random atau timestamped ke akhir file gambar Anda akan membuat browser mengunduh ulang dan menyimpan cache setiap versi dari setiap gambar, setiap kali halaman dimuat, terlepas dari cuaca gambar berubah atau tidak di server.

Solusi 2 tidak berguna. Menambahkan nocacheheader ke file gambar tidak hanya sangat sulit untuk diterapkan, tetapi juga sangat tidak praktis karena mengharuskan Anda untuk memprediksi kapan itu akan dibutuhkan sebelumnya , pertama kali Anda memuat gambar yang menurut Anda mungkin berubah di beberapa titik di masa mendatang. .

Masukkan Etags ...

Cara terbaik mutlak yang saya temukan untuk memecahkan masalah ini adalah dengan menggunakan ETAGS di dalam .htaccess file di direktori gambar Anda. Perintah berikut memberi tahu Apache untuk mengirim hash unik ke browser di header file gambar. Hash ini hanya akan berubah ketika file gambar diubah dan perubahan ini memicu browser untuk memuat ulang gambar saat diminta lagi.

<FilesMatch "\.(jpg|jpeg)$">
FileETag MTime Size
</FilesMatch>

Saya memeriksa semua jawaban dan yang terbaik sepertinya (yang tidak):

<img src="image.png?cache=none">

pertama.

Namun, jika Anda menambahkan cache = none parameter (yang merupakan kata "tidak ada" statis), itu tidak berpengaruh apa-apa, browser masih memuat dari cache.

Solusi untuk masalah ini adalah:

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

di mana Anda pada dasarnya menambahkan stempel waktu unix untuk membuat parameter dinamis dan tidak ada cache, itu berhasil.

Namun, masalah saya sedikit berbeda: Saya memuat gambar bagan php dengan cepat, dan mengontrol halaman dengan parameter $ _GET. Saya ingin gambar dibaca dari cache ketika parameter URL GET tetap sama, dan tidak melakukan cache ketika parameter GET berubah.

Untuk mengatasi masalah ini, saya perlu hash $ _GET tetapi karena itu adalah array, inilah solusinya:

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

Edit :

Meskipun solusi di atas berfungsi dengan baik, terkadang Anda ingin menyajikan versi yang di-cache SAMPAI file diubah. (dengan solusi di atas, itu menonaktifkan cache untuk gambar itu sepenuhnya) Jadi, untuk menyajikan gambar yang di-cache dari browser HINGGA ada perubahan dalam penggunaan file gambar:

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime () mendapat waktu modifikasi file.

Saya tahu topik ini sudah lama, tetapi peringkatnya sangat baik di Google. Saya menemukan bahwa meletakkan ini di header Anda bekerja dengan baik;

<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">

Saya hanya mencari solusi untuk ini, dan jawaban di atas tidak berhasil dalam kasus saya (dan saya memiliki reputasi yang tidak memadai untuk mengomentarinya). Ternyata, setidaknya untuk kasus penggunaan saya dan browser yang saya gunakan (Chrome di OSX), satu-satunya hal yang tampaknya mencegah caching adalah:

Cache-Control = 'no-store'

Untuk kelengkapan, saya sekarang menggunakan semua 3 dari 'no-cache, no-store, must-revalidate'

Jadi dalam kasus saya (menyajikan gambar yang dihasilkan secara dinamis dari Flask dengan Python), saya harus melakukan hal berikut agar dapat bekerja di sebanyak mungkin browser ...

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

Mengubah sumber gambar adalah solusinya. Anda memang dapat melakukan ini dengan menambahkan stempel waktu atau nomor acak ke gambar.

Lebih baik menambahkan checksum misalnya data yang diwakili oleh gambar. Ini memungkinkan penyimpanan dalam cache jika memungkinkan.

Mari tambahkan solusi lain satu ke kelompok itu.

Menambahkan string unik di akhir adalah solusi yang tepat.

example.jpg?646413154

Solusi berikut memperluas metode ini dan menyediakan kemampuan caching dan mengambil versi baru ketika gambar diperbarui.

Ketika gambar diperbarui, filemtime akan berubah.

<?php
$filename = "path/to/images/example.jpg";
$filemtime = filemtime($filename);
?>

Sekarang keluaran gambar:

<img src="images/example.jpg?<?php echo $filemtime; ?>" >

saya punya masalah ini dan mengatasi seperti ini.

var newtags='<div class="addedimage"><h5>preview image</h5><img src="'+one+'?nocache='+Math.floor(Math.random() * 1000)+'"></div>';

Saya telah menggunakan ini untuk menyelesaikan masalah serupa saya ... menampilkan penghitung gambar (dari penyedia eksternal). Itu tidak selalu menyegarkan dengan benar. Dan setelah parameter acak ditambahkan, semuanya berfungsi dengan baik :)

Saya telah menambahkan string tanggal untuk memastikan penyegaran setidaknya setiap menit.

kode contoh (PHP):

$output .= "<img src=\"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."\" alt=\"somecounter.com\" style=\"border:none;\">";

Itu menghasilkan srctautan seperti:

http://xy.somecounter.com/?id=1234567890&1207241014

Jika Anda memiliki URL gambar hardcode, misalnya: http://example.com/image.jpg Anda dapat menggunakan php untuk menambahkan header ke gambar Anda.

Pertama, Anda harus membuat proses apache jpg Anda sebagai php. Lihat di sini: Apakah mungkin untuk mengeksekusi PHP dengan ekstensi file.php.jpg?

Muat gambar (imagecreatefromjpeg) dari file lalu tambahkan header dari jawaban sebelumnya. Gunakan header fungsi php untuk menambahkan header.

Kemudian keluarkan gambar dengan fungsi imagejpeg.

Harap perhatikan bahwa sangat tidak aman membiarkan php memproses gambar jpg. Perlu diketahui juga bahwa saya belum menguji solusi ini jadi terserah Anda untuk membuatnya berfungsi.

Sederhana, kirim satu lokasi tajuk.

Situs saya berisi satu gambar, dan setelah upload gambar tersebut tidak ada perubahan, kemudian saya tambahkan kode ini:

<?php header("Location: pagelocalimage.php"); ?>

Bekerja untukku.