Develop Reference

Properly caching firebase storage image

I have a chat web application that I am attempting to cache images downloaded from Firebase Storage. I have set the cacheControl metadata property to 64800 when uploading the picture.
let storageRef = ref(storage,'Groups/' + this.groupRef.id + '/Images/' + uuid())
const metadata = {
cacheControl: 'public,max-age=64800'
}
uploadBytes(storageRef, context.image, metadata).then(async (snap) => {
// Do something
})
However, when I reload the page, the app redownloads the picture from Firebase. I have confirmed that the metadata property is set on every image (see below). This is obviously not ideal, considering if users switch between groups, it will attempt to redownload the images and will get very pricey, very quickly. Why is it redownloading each time? Here is the code to display the image
<v-img height="200" :src="msg.uri" #load="loaded" #click="launchImg(msg)"/>

After doing more testing, it appears v-img does not handle cached images for whatever reason. After switching to an <img> tag, the caching appears to be working properly now

Replace image with the same path not working after second time in Html/Javascript

I have an application in Asp.net Core MVC in which user upload his profile image. The server side is working fine but at client side when i change the image src for first upload, it works fine but after second time the image replaced at server but at client side it shows the same. That's how i am changing the src of an image.
var src = "/up_images/profiles/" + result.data;
$("#profileImage").attr("src", src);
please note that i am replacing the existing image. In this case if src is "/up_images/profiles/137.jpg" then after uploading image the src will be the same. "137" is the user id.
if i refresh the page the image changes too.
also i have tried with some delay using timeout but it is not working.
What is the issue?

If the image path is exactly the same but resource changes, you'll want to force the request. That can easily be done by appending a query such as the current time.
$("#profileImage").attr("src", src + "?" + Date.now());
Or with template literals
$("#profileImage").attr("src", `${src}?${Date.now()}`);

You can try appending a query parameter that changes for each request, onto the end of the URL. It will get ignored by the server side, but the browser will treat it as a new request and not re-use the cached image.
Something like this:
var src = "/up_images/profiles/" + result.data + "?v=" + Date.now();
$("#profileImage").attr("src", src);

Programm that tracks changes on web page

I have a web page that has several images on it and a script in it which changes picture of one random image once in some time interval. Script changes the image by rewtiting its file in the cash an updating it on the page. So url of the image picture doesnt chage in html code:
socket.on("banner", function(info) {
banName = "banner" + info.bid;
ban = document.getElementById(banName).getContext('2d');
var img = new Image();
img.src = 'data:image/jpg;base64,' + info.image;
img.onload = function(){ban.drawImage(img, 0, 0);};
});
How can I track image change using for example C#, when the page is in the browser?

As a last resort, retrieve the image periodically and load it into a byte array. Checking changes is just a matter of checking if the byte array has changed.
edit:
It seems the hard part is about how can one retrieve the image data. Without any javascript code in the browser, use C# to establish a websocket connection to mimic the behavior of javascript.
But I think it would be easier done by modifying the javascript code in the browser.

fetch image url at fixed intervals using javascript

I am a complete beginner in javascript so I don't even know where to begin. I have a URL that displays a .jpg snapshot. It is served from a video server. I would like to take the image and display it on a webpage with the image being refreshed every 2 seconds. The image will be displayed in a div container with id="snapshot"
Any help or guidance will be greatly appreciated.

For your html, you do the following:
<div id="snapshot"><img/></div>
Then in your JavaScript you do the following:
var url = "some url somewhere";
var snapshotImg = document.querySelector('#snapshot > img');
var updateInterval = setInterval(updateImage, 2000); //start the update every 2 seconds
updateImage(); //immediately update the image
function updateImage(){
snapshotImg.src = url + "?"+ new Date().getTime();
}
In the 'updateImage' function, I added a ? and a time hash to the url so that each time it sets the source, the srcurl is unique. If you don't make it unique each time, the browser will cache the image from the first request, and it won't ever update the image. So, you have to make the url unique, and you that by adding a hash, that is arbitrary, to the end of the url. I hope that makes sense.

jQuery - Read data from text file with .get/.load - force reload?

I want to load data from a web server with jQuery. I'm uploading a file to a web server, put the response (which is containing a link) to an iframe and read this link with .get(). When I now upload another file, which leads to the same filename but changed contents, .get() does not read the content correctly on the first try, but reliable on the second. .load() should do basically the same, but does not reload the file no matter how often I re-upload the file.
Is there a chance to force the reload of the changed file?
var linkToTextFile = 'http://www.myserver.com/myTextFile.txt';
$.get(linkToTextFile, function(data){
alert("Data:" + data); //content changes on second try
});

Try to append a random GET parameter to your text file's URL :
var timestamp = new Date().getTime();
var linkToTextFile = 'http://www.myserver.com/myTextFile.txt?t=' + timestamp;
This way it will force the browser to reload the file.