Existe uma maneira de forçar os navegadores a atualizar/baixar imagens?

StackOverflow https://stackoverflow.com/questions/1431512

Pergunta

Tenho um problema em que os usuários estão relatando que suas imagens não estão sendo carregadas e as antigas ainda estão lá. Em uma inspeção mais detalhada, as novas imagens estão lá, elas têm o mesmo nome que as antigas. O que faço no upload é que renomeei as imagens para fins de SEO. Quando eles excluem uma imagem, o índice antigo fica disponível e é reutilizado. Portanto, ele tem o mesmo nome de imagem.

Existe uma maneira de (eu pensei que talvez haja uma meta etiqueta para isso) para dizer ao navegador para não usar seu Cahce?

A melhor resposta é renomear a imagem para algo totalmente novo. Vou trabalhar nisso, mas nesse meio tempo é a solução rápida enquanto trabalho no problema maior.

Foi útil?

Solução

Anexe uma string de consulta com um número exclusivo arbitrário (ou tempo ou número da versão, etc.):

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

Isso resultará em uma nova solicitação, devido ao URL diferente.

Outras dicas

É duro. Você realmente quer que as imagens sejam armazenadas em cache, mas não quer cache -lhes uma vez que as novas disponíveis:

  • O uso do cabeçalho Expire com uma data no passado impede qualquer armazenamento em cache. Mau
  • Adicionando um parâmetro de "busto de cache"? 342038402 pode corrigir o problema, mas também pode impedir que a imagem seja em cache, o que não é o que você deseja. Mau.
  • O uso do cabeçalho Expire com um curto (digamos 1 hora) é melhor ... depois de uma hora, o usuário verá a imagem, mas seu servidor da Web não precisará servir sempre. Compromisso, mas que horas funciona? Não é realmente viável.

A solução? Eu posso pensar em duas boas opções:

  • Olhe para Etags e sua capacidade de usá -los. Estes foram projetados para esta situação. O navegador perguntará explicitamente ao seu servidor se o arquivo está atualizado ou não. Você pode simplesmente ativar isso no Apache, se não tiver ALEADY.
  • Crie um novo URL para cada nova imagem (e use um cabeçalho de expiração do futuro distante). É nisso que você está trabalhando.

Você pode colocar http-equiv dentro <meta> Tag que dirá ao navegador para não usar o cache (ou até melhor - use -o de alguma maneira definida), mas é melhor configurar o servidor para enviar o HTTP adequado cache cabeçalhos. Verificação de saída Artigo sobre armazenamento em cache.

Ainda assim, alguns navegadores podem não apoiar todo http padrão, mas acredito que é o caminho a percorrer.

Anexe o datetime atual à imagem SRC:

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

Você pode controlar o comportamento do cache tocando com os cabeçalhos HTTP.

Definir o cabeçalho Expires no passado forçaria o navegador a não usar a versão em cache.

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

Você pode consultar o RFC ter mais detalhes.

Se você observar os dados trocados entre o navegador e o servidor, verá que o navegador enviará uma solicitação de cabeça HTTP para as imagens. O resultado conterá o tempo de modificação (mas não os dados da imagem real). Certifique -se de que esse tempo mude se a imagem mudar no servidor e o navegador download da imagem novamente.

No PHP, você pode usar este truque

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

A função Time () mostra o registro de data e hora atual. Cada carga de páginas é diferente. Portanto, este código engana o navegador: leu outro caminho e "pense" que a imagem é alterada desde que o usuário visitou o site da última vez. E ele deve baixá-lo novamente, em vez de usar o cache.

Vá aleatório. Basta usar um número aleatório e anexá -lo com o nome do arquivo de imagem. 

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

No PHP, você pode enviar um número aleatório ou o registro de data e hora atual:

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

ou

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

Isso não foi o bom resultado, acho que essa é a maneira de programá -lo correto.

 <td><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top