Problem with v-if. How can I tell if an image has already been loaded? Why is the image reloading?

Question

JavaScript

For lazy load pictures I use this

mouseEnterHandler () {
      let img = new Image()
      img.src = this.image
      img.onload = () => {
        this.show = true
      }
    }

Everything is OK, except for the strange behavior - on subsequent calls to this function, the image is loaded again, despite the fact that it has already been loaded by the browser. How to prevent such action? In addition to setting a stupid flag that the picture has already been loaded.
upd In general, with the flag it is still loaded again sometimes

upd 2. I found the problem because of what. I have this element with the directive v-if. Pointing at this element with a picture, I insert it into the house and remove it back. But for some reason, once out of 50 such mouseovers, the picture is loaded again.

Answer 1

Perhaps the first request is of the OPTIONS type - the browser sends it to check the availability of the subsequent GET request from the server (the so-called preflight ). Perhaps you need to configure the server to send 204 and an empty response to these requests, a la:

if ($request_method = 'OPTIONS') {
    return 204;
}