在vue中防止瞬间“无图像可用”的方法
在vue中防止瞬间“无图像可用”的方法
提问于 2019-04-24 01:14:42
我有一个片段
<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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 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>Stack Overflow用户
发布于 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 />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55816309
复制相关文章
相似问题