如何使用相同的离子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

你可以使用一个循环遍历你的所有。将所有图像路径存储在一个字符串数组中，然后遍历该数组。并在这个循环中打包你的代码块。