Comment afficher dynamiquement des images à partir d'une URL et éviter la mise en cache du navigateur ?

Affichage d'images dynamiques avec une URL mise en cache

Considérons un scénario dans lequel vous récupérez une image à partir d'une URL spécifique, en vous assurant que chaque accès génère un image. Cependant, lorsque vous tentez de mettre à jour l'image sur la page, l'image reste inchangée à moins que la page ne soit rechargée.

Code JavaScript pour l'affichage de l'image

Le code JavaScript suivant illustre le mécanisme d'affichage et d'actualisation de l'image :

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage() {
  if (newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
  }

  setTimeout(updateImage, 1000);
}

Dans le scénario donné, l'image n'est pas mise à jour en raison de la possibilité pour le navigateur de mettre en cache l'image à l'heure spécifiée URL. Cela peut empêcher le navigateur de récupérer la version de l'image la plus récente.

Surmonter le problème de cache

Pour forcer l'actualisation de l'image, l'URL peut être ajoutée avec un brise-cache. Cela garantira que le navigateur récupère l'image directement depuis le serveur au lieu de s'appuyer sur la version mise en cache. Le code modifié comprendrait :

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

Cet ajout garantit que l'horodatage actuel est ajouté à l'URL à chaque fois qu'une image est créée. En conséquence, le navigateur récupérera l'image du serveur au lieu d'accéder à la version mise en cache. En ajoutant ce briseur de cache, l'image sur la page sera mise à jour dynamiquement, reflétant la dernière version fournie par le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!