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

Posted 2023-03-13

【中文标题】如何使用相同的 ionic html 来显示不同的图像？

【英文标题】：How to use the same ionic html for showing different images?

【发布时间】：2018-03-28 17:00:02

【问题描述】：

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

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

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

仅供参考，这是代码，

<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 来获得相应的图像用户点击。

谢谢。

【参考方案1】：

你只需要在这里创建Angular/Ioniccustom component。

ionic generate component MyImageSlider

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

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

【参考方案2】：

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