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