如何在 Ionic 2 的选择组件中使用图像 [英] How to use images inside a select component in Ionic 2

问题描述

我正在尝试将图像放入 Select 组件:我已将图像源文件放在 Ionic 2 项目的 www/img 文件夹中.但是，使用简单的 img-tag 不会显示任何使用此代码的图像:

I am trying to put an image inside a Select component in Ionic 2 : I have put the image source files inside the www/img folder in my Ionic 2 project. However, using a simple img-tag does not display any image using this code:

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">
        NES
        <img src="img/myImage.png">
      </ion-option>
    </ion-select>
  </ion-item>
</ion-list>

有人知道吗?

推荐答案

ion-select 组件不允许直接自定义自身以及添加到 ion-select 和 ion-option 中的任何不符合 ionic文档，将在生成的输出中被忽略.

The ion-select component doesn't allow direct customization to itself and anything that you add to ion-select and ion-option which is not as per the ionic documentation, will be ignore in the generated output.

您不能为组件添加类或样式.

You cannot add class or style to the component.

这样做的一种方法是将 ion-select 放在带有 class 的父元素(如 div 或 ion-row 等)中，并使用 .parentclass childElement 选择器应用 CSS 规则.

One way to do this is to put the ion-select in a parent element like div or ion-row etc. with class and apply the CSS rules using .parentclass childElement selector.

要在选项中显示图像，请检查以下功能:

To show the images in option check the function below:

    prepareImageSelector() {
    setTimeout(() => {
        let buttonElements = document.querySelectorAll('div.alert-radio-group button');
        if (!buttonElements.length) {
            this.prepareImageSelector();
        } else {
            for (let index = 0; index < buttonElements.length; index++) {
                let buttonElement = buttonElements[index];
                let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
                let image = optionLabelElement.innerHTML.trim();
                buttonElement.classList.add('imageselect', 'image_' + image);
                if (image == this.image) {
                    buttonElement.classList.add('imageselected');
                }
            }
        }
    }, 100);
}

我已经使用 ion-select 实现了颜色和图像选择器.请参考 https://github.com/ketanyekale/ionic-color-and-图片选择器

I have implemented color and image selector using ion-select. Please refer https://github.com/ketanyekale/ionic-color-and-image-selector

您还可以在 离子选择颜色输入

这篇关于如何在 Ionic 2 的选择组件中使用图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！