6天前我《遇到一个很奇葩的bug》,当时以为是cdn的问题,我用的是百度云加速,还是专业版,联系客服被告知不是云加速的问题。

客服反复和我说,经测试,源站不经加速缓存,也存在移动端不显示商品图片的情况,强调不是他们的问题。
但是他的说法和我测试的相反,我关闭cdn加速,直接走源站是完全没有问题的,这没办法,我脾气上来了,断断续续花了几天看代码调试,一定要找到是什么原因。
问题现象
先说一下,用F12查看网页,未显示商品图片的地方,是<!—->这样的注释代码,根据经验,我们可以猜到是vue判断不满足条件,留下的代码。
找到核心代码块:
//html
<div class="shop-normal-item-img">
<img v-if="data === ''" src="<?php echo B2_THEME_URI.'/Assets/fontend/images/default-img.jpg'; ?>" />
<img v-else :src="data[<?php echo $post_id; ?>].thumb" v-cloak>
<span class="shop-normal-tips" v-if="data !== '' && data[<?php echo $post_id; ?>].price.price_text" v-text="data[<?php echo $post_id; ?>].price.price_text"></span>
<a class="link-block" href="<?php echo get_permalink($post_id); ?>"></a>
</div>
//vue js this.$http.post(b2_rest_url+'getShopItemsData',Qs.stringify(ids)).then((res)=>{
this.data = res.data
})
简单来说,就是从接口getShopItemsData,获取到商品列表的数据,然后赋值data,前端html根据data对应的post_id显示文章图片。
这一段代码不论怎么看都是没问题的,而且其他人的网站也没有出现商品打不开的情况,仅仅是我自己的网站,在百度CDN的情况出现,着实令人想不通到底为什么?
而且重点是console也没有任何报错的信息。
不甘心的我,打开F12,对比本地源站网页和经过CDN加速过的网页源码,看看到底哪里有什么不同。

竟然是在img标签后面多了一个noscript标签,熟悉vue的都知道,v-if后面的v-else之间不能隔其他的标签,否则v-else将不能生效。

既然找到原因,我们再次联系云加速客服,看看他们如何解释?

没想到,百度那边直接甩锅,直接说不影响图片显示,看来他们的技术不懂Vue,也不懂我给他反馈的图片,没办法,他们不处理,最后只有我自己来做了。
解决方法:
另外据子安站长反馈,有些插件启用以后,也会出现同样的情况,那不出意外,也是因为对img标签前后做了改动导致的。

开启百度云加速有啥好处? 为什么不直接使用CDN