react如何實現圖片占位模塊組件

小編給大家分享一下react如何實現圖片占位模塊組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

截圖：

功能簡介

首先它是一個比較優雅的組件：用起來不頭疼。

第二個它能實現以下場景：

• 沒有圖片的時候，顯示一個占位圖（可以直接用css來寫背景，方便自定義）

• 希望在加載大圖的時候，能先占位一張小圖，然后再過渡到一張大圖。類似上面的截圖。

使用方法

安裝npm 包

npm install react-mult-transition-image-view

代碼部分

 import ImageBoxView from 'react-mult-transition-image-view'

 <ImageBoxView img="#你的圖片#"/>

當然 你可以設置其他屬性

 <ImageBoxView
 width="320" // 
 height="200" // 寬高，會轉化成 style 屬性
 mode="style" // 使用 style 去顯示圖片（默認:img）
 img="#你要的圖片#"/> // 圖片路徑

小圖過渡到大圖的效果

 <ImageBoxView
 animate="fade" // 會觸發動畫樣式(見下方樣式部分 )
 mode="style" // 使用 style 去顯示圖片（默認:img）
 img={['#小圖地址#', '#大圖地址#']}/> // img 傳入數組形式。

實現隨機顯示圖片

當有很多圖片的時候，可以讓圖片隨機時間顯示，增加圖片顯示出來的體驗
（一起出來真的有點丑）

 <ImageBoxView
 delay="100" // 延遲加載（默認：0），可以傳入一個隨機數
 img="#你要的圖片#"/> // 圖片路徑

幻燈片效果

因為 img 屬性可以傳入數組，所以 理論上可以加載很多圖，實現幻燈片效果。
使用 wait 屬性 來設置，每張圖片加載后的等待時間

 <ImageBoxView
 animate="fade" // 會觸發動畫樣式(見下方樣式部分 )
 wait="100" // 每張圖片加載完后，繼續加載下一張的時間（默認：0）
 mode="style" // 使用 style 去顯示圖片（默認:img）
 img={['#圖片1#', '#圖片2#', '#圖片3#']}/> // img 傳入數組形式。

樣式部分

別忘了樣式部分

.c-img-box{
 display:inline-block;
 width: 320px;
 height: 200px;
 background: #f7f6f5;
 position: relative;
 .img-hold{
 overflow: hidden;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 img{
  width:100%;
  height:100%;
 }
 &.img-animate{
  transition: opacity 0.5s;
 }
 }
 
 .img-cover{
 background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
 background-color:#f0f0f0;
 }
 
 .img-cover,
 .img-hold,
 .img-hide{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 }
 
 .img-hide{
 opacity: 0;
 }
 
}

以上是“react如何實現圖片占位模塊組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！