Wir betreiben die Webseite webcam-dresden.de und standen vor dem Problem, das generierte JPG in die Webseite so einzubinden, dass die Browser der Aufrufer der Webseite die Bilder nicht cachen, damit immer das aktuelle Webcam-Bild betrachtet werden kann.
Um ein Bild in eine HTML-Seite einzubinden, das nicht gecacht wird, kannst du JavaScript verwenden, um das Bild dynamisch in den DOM (Document Object Model) einzufügen. Hier ist ein einfaches Beispiel, wie du das tun kannst:
<!DOCTYPE html>
<html>
<head>
<title>Bild ohne Cache</title>
</head>
<body>
<div id="imageContainer"></div>
<script>
// Erstelle ein neues Image-Element
var image = new Image();
// Füge eine Event-Handler-Funktion hinzu, um sicherzustellen, dass das Bild nicht gecacht wird
image.onload = function() {
// Das Bild wurde erfolgreich geladen
document.getElementById('imageContainer').appendChild(image);
};
// Füge eine zufällige Abfragezeichenfolge an die Bild-URL an, um das Caching zu verhindern
var randomQueryString = Date.now(); // Ein zufälliger Wert (Timestamp)
image.src = 'dein_bild.jpg?' + randomQueryString;
// Füge das Image-Element zur HTML-Seite hinzu
document.getElementById('imageContainer').appendChild(image);
</script>
</body>
</html>In diesem Beispiel wird ein <div>-Element mit der ID „imageContainer“ erstellt, in dem das Bild angezeigt wird. Das JavaScript erstellt ein neues Image-Element, fügt eine zufällige Abfragezeichenfolge an die Bild-URL an und fügt es schließlich dem „imageContainer“ hinzu. Die zufällige Abfragezeichenfolge verhindert das Caching des Bildes, da der Browser das Bild jedes Mal neu herunterladen wird, wenn die Seite geladen wird.
Ersetze 'dein_bild.jpg' durch den tatsächlichen Pfad zu deinem Bild. Beachte, dass du sicherstellen musst, dass der Pfad zur Bilddatei korrekt ist.
