title: Way to prevent momentary "no Image Available" in vue
body: <p>I have this snippet  </p>
  
  <pre><code>&lt;b-img v-if="validPicture" :src="imgSrc" fluid alt&gt;&lt;/b-img&gt;
    &lt;b-embed v-else-if="validVideo" type="iframe" aspect="16by9" :src="imgSrc" allowfullscreen&gt;&lt;/b-embed&gt;
    &lt;p v-else &gt;Sorry. No Image Available&lt;/p&gt;
  </code></pre>
  
  <p>I would like it if the v-else "Sorry No image Available" does not do a FOUT like behavior before my image loads. v-cloak does not work for this. Any suggestions most welcome.</p>
  
  <p>Updated code are:</p>
  
  <pre><code>          this.validPicure = /\.bmp|\.gif|\.png|\.jpg|\.jpeg\.tiff/gim.test(
              this.imgSrc
            );
            this.validVideo = /http/gim.test(this.imgSrc);
  </code></pre>
  
  <p>Computed Property:</p>
  
  <pre><code>computed: {
      noImage: function() {
        if (this.imgSrc === null || this.imgSrc === undefined) {
          return true;
        }
      }
  </code></pre>