Vue: about use v-if image is loaded

[ruohuan]

<div v-if="condition">
    <img  src="path" />
</div>

In the above code, if the condition is satisfied, it will insert the image. If condition is not satisfied, it would not insert the image. But in the network panel has seen this image is loaded

[azamat-sharapov]

Proof?

[ruohuan]

The image dom node is not in the nodes tree, but we can see the image load request in the chrome network panel

[posva]

By proof we mean a reproduction in a jsfiddle or jsbin

[ruohuan]

Proof: http://jsfiddle.net/4z02btnp/

You can also see directly below the screenshot：

[simplesmiler]

This is most likely because the browser attempts to download the image before Vue gets a chance to remove the <img> element from the DOM. Try wrapping the template in <template> or <script>, or even inlining it into js.

[yyx990803]

Unfortunately this happens when Vue clones the template, even if the node is off-DOM it will still trigger the network request. This happens before Vue compiles it.

A simple workaround is use :src="'path'". This should not trigger any request until it is compiled.

[ruohuan]

ok，thx