Vue-lazyload and vue-awesome-swiper are used together, resulting in inexplicable bug, bosses. Let's take a look.

vue-lazyload and vue-awesome-swiper are used in vue-cli. The scene is, open the broadcast picture, and then because the picture is large and the network is not good, a loading picture will be put on first, and the result will be like this (see the result first)

loadingerrorsrc


// 
<img 
    data-src="http://localhost/slide/slowsexbanner.jpg" 
    data-loading="/lazyload/swiper-loading.png" 
    data-error="/lazyload/swiper-error.png" 
    alt="" 
    src="/lazyload/swiper-error.png"  //src
    lazy="error"
>

// src
<img 
    data-src="http://localhost/slide/201804301958.jpg" 
    data-loading="/lazyload/swiper-loading.png" 
    data-error="/lazyload/swiper-error.png" 
>

I have also tried to put the location where use () loads vue-lazyload behind other plug-ins, but the effect is the same, there is no way to solve it, ask for help from the bosses

Apr.02,2021

Hello, it is recommended that you use the lazy loading of swiper , so that this problem should not occur.


after one day, the problem has been solved, which is caused by the adaptive height set by swiper. The problem has been solved by swiper's bug,


. You haven't seen how to solve it in your blog, and you haven't used vue-lazyload

.
Menu