如何使用相同的 ionic html 来显示不同的图像？

Question

我正在构建壁纸/画廊离子应用程序。我正在尝试以这样一种方式设计应用程序，即用户可以单击显示为离子卡的图像，并且用户将全屏显示图像，可能使用离子幻灯片下面有个下载图片的按钮。

我知道使用相同的代码多次全屏显示图像不是一个好习惯。

有什么方法可以让我使用同一个离子幻灯片代码多次显示相应的图像全屏。

仅供参考，这是代码，

<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

之后，将您的图片滑块包裹在其中，并在用户单击 ionic card 时将您的图片 URL 动态发送到该自定义组件。

您可以在此处查看如何创建custom Component。

Answer 2

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