div背景图片_Vue 各种坑总结（swiper、背景图片）

swiper 的使用
全局引入

• CDN 模式，在 index.html 直接使用。

   <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
   <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
      //引入
   <div class="swiper-container">
       <div class="swiper-wrapper">
       	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
       	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
       	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
       </div>
   </div>
   
   //初始化，必须在 挂载阶段。
   mounted() {
   	new Swiper('.swiper-container', {
   	      slidesPerView: 'auto',
   	      spaceBetween: 30,
   	      pagination: {
   	        el: '.swiper-pagination',
   	        clickable: true,
   	      },
   	});
   }

vue-awesome-swiper的使用 (暂未有时间，有空编写)

背景图片为动态时

    <template>
        <div class="header" :style=" `background: url(${ bck_url }) center no-repeat;`">
            
        </div>
    </template>

当背景图片为动态且 图片路径为 src 下, 引入时 , vue 会不解析 图片地址。而 还是 字符串

正常情况下，例如 header.png 图片 会解析为 header_3.4e7ddc9.png ,

解决方法：

- 图片放在静态资源下， `static` 下

原文链接：Vue 各种坑总结（swiper、背景图片）
作者：北风丶