我有一个片段
<b-img v-if="validPicture" :src="imgSrc" fluid alt></b-img>
<b-embed v-else-if="validVideo" type="iframe" aspect="16by9" :src="imgSrc" allowfullscreen></b-embed>
<p v-else >Sorry. No Image Available</p>
如果v-else“对不起没有可用的图像”在我的图像加载之前没有执行类似于FOUT的行为,我会很高兴。V-斗篷不适用于此。欢迎任何建议。
更新后的代码如下:
this.validPicure = /\.bmp|\.gif|\.png|\.jpg|\.jpeg\.tiff/gim.test(
this.imgSrc
);
this.validVideo = /http/gim.test(this.imgSrc);
计算属性:
computed: {
noImage: function() {
if (this.imgSrc === null || this.imgSrc === undefined) {
return true;
}
}
发布于 2019-04-24 01:46:06
您并没有展示validPicture
和validVideo
背后的逻辑,但大概可以使用noImage
计算属性对其进行补充
<b-img v-if="validPicture" :src="imgSrc" fluid alt />
<b-embed v-else-if="validVideo" type="iframe" aspect="16by9" :src="imgSrc" allowfullscreen />
<p v-else-if="noImage" >Sorry. No Image Available</p>
发布于 2019-04-24 02:29:59
检查是否为有效图片以及变量是否不为空
<b-img v-if="validPicture && imgSrc !== '' && imgSrc !== undefined" :src="imgSrc" fluid alt></b-img>
视频也是如此
<b-embed v-else-if="validVideo && imgSrc !== '' && imgSrc !== undefined" type="iframe" aspect="16by9" :src="imgSrc" allowfullscreen />
https://stackoverflow.com/questions/55816309
复制相似问题