如何使用相同的離子html顯示不同的圖像？

Question

我正在建設壁紙/畫廊離子app.I想要設計的應用程序，用戶可以點擊圖像顯示爲離子卡和用戶將顯示圖像在全屏幕可能使用離子幻燈片與下面下載圖片的按鈕。

我知道一個事實，即使用相同的代碼來多次顯示全屏圖像並不是一個好習慣。

有什麼辦法可以使用相同的離子幻燈片代碼多次顯示相應的圖像全屏幕。

僅供參考，這裏是代碼，

<ion-slidesj zoom="true"> 
    <ion-slide> 
    <div class="swiper-zoom-container"> 
     <img src="assets/img/dog.jpg"> 
    </div> 
    <ion-label>Woof</ion-label> 
    </ion-slide> 
    <ion-slide> 

我想使用不同IMG SRCS多次使用上面相同的代碼對應的圖像用戶點擊。

謝謝。

Answer 1

你只需要在這裏創建Angular/Ioniccustom component。

ionic generate component MyImageSlider 

之後包你的形象滑塊裏面並動態發送圖像的URL到自定義組件，當用戶點擊ionic card。

您可以在這裏看到如何創建custom Component。

Answer 2

你可以使用一個循環遍歷你的所有。將所有圖像路徑存儲在一個字符串數組中，然後遍歷該數組。並在這個循環中打包你的代碼塊。