在做vue项目的时候,优化性能的时候不可避免的要对图片进行懒加载提高网站性能

但是总会出现正常访问图片url没问题,使用懒加载后路径就不对

不管是使用vue-lazyload    还是使用swiper中的lazy模式,都会出现上述问题,那是因为项目运行编译后的地址会发生变化,但是你使用的却是编译前的地址,不管是使用相对路径还是绝对路径都肯定会发生错误

解决办法

拿swiper-lazy为例

正常的img写法

<img src="@/assets/product_center.png" alt="">

使用swiper-lazy的错误写法

<img class="swiper-lazy" data-src="@/assets/product_center.png" alt="">

上述写法在非vue(node下)情况下是没问题的

正确的写法

<img class="swiper-lazy" :data-src="require('@/assets/product_center.png')" alt="">

使用require,问题迎刃而解

Logo

前往低代码交流专区

更多推荐