vue性能优化,vue中swiper lazy懒加载图片路径问题
在做vue项目的时候,优化性能的时候不可避免的要对图片进行懒加载提高网站性能但是总会出现正常访问图片url没问题,使用懒加载后路径就不对不管是使用vue-lazyload还是使用swiper中的lazy模式,都会出现上述问题,那是因为项目运行编译后的地址会发生变化,但是你使用的却是编译前的地址,不管是使用相对路径还是绝对路径都肯定会发生错误解决办法拿swiper-lazy为...
·
在做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,问题迎刃而解
更多推荐
已为社区贡献11条内容
所有评论(0)