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

成都創(chuàng)新互聯(lián)公司長期為上千多家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為漢中企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都網(wǎng)站建設、外貿(mào)網(wǎng)站建設，漢中網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

截圖：

功能簡介

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

第二個它能實現(xiàn)以下場景：

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

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

使用方法

安裝npm 包

npm install react-mult-transition-image-view

代碼部分

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

 

當然 你可以設置其他屬性

  // 圖片路徑

小圖過渡到大圖的效果

  // img 傳入數(shù)組形式。

實現(xiàn)隨機顯示圖片

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

  // 圖片路徑

幻燈片效果

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

  // img 傳入數(shù)組形式。

樣式部分

別忘了樣式部分

.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如何實現(xiàn)圖片占位模塊組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！