如何在Ionic 2中的选择组件内使用图像

约翰

我正在尝试将图像放入SelectIonic 2中组件中:我已经将图像源文件放入www/imgIonic 2项目中文件夹中。但是,使用简单的img-tag不会使用以下代码显示任何图像:

<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中的任何内容(与离子文档不同)都将在生成的输出中被忽略。

您不能向组件添加类或样式。

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

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

    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-image-selector

您还可以在离子的颜色选择输入中检查答案

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Ionic 2内使用Camera?

来自分类Dev

如何在IONIC 2中设置宽度为100%的离子选择组件

来自分类Dev

我如何在组件的ionic 2中获取输入值?

来自分类Dev

如何在Ionic 2中的各个组件之间共享变量?

来自分类Dev

我如何在组件的ionic 2中获取输入值?

来自分类Dev

如何在Ionic 4中使用PrimeNG(评级)组件?

来自分类Dev

如何在ionic 2中选择自动随机滑块?

来自分类Dev

如何在ionic + CSS中制作按钮

来自分类Dev

如何在ionic + CSS中制作按钮

来自分类Dev

如何在 Ionic 中创建 AlertController 模拟

来自分类Dev

如何在ionic 3中实现评级?

来自分类Dev

如何在 Ionic 4 中触发 slideNext

来自分类Dev

如何在Ionic中使用SharedPreferences?

来自分类Dev

如何在ionic 2中使用Scandit插件

来自分类Dev

如何在 Ionic Framework 中创建布局类型组件

来自分类Dev

如何在ionic 2中完成自动完成(搜索栏)

来自分类Dev

如何在ionic2中列出或删除服务,页面?

来自分类Dev

如何在ionic 2中创建覆盖页面?

来自分类Dev

Ionic2:如何在单个页面中设置CSS

来自分类Dev

如何在ionic2中重定向

来自分类Dev

如何在ionic 2中按月分组项目?

来自分类Dev

如何在Ionic2中对齐项目?

来自分类Dev

如何在Ionic 2 Framework中访问WiFi功能

来自分类Dev

如何在IONIC 2中构建和签署发布apk

来自分类Dev

如何在 Ionic2 框架中解析 Json 数据?

来自分类Dev

如何在 Ionic2 中添加用户定义的图标?

来自分类Dev

如何在 ionic 2 中制作可滑动的段标签?

来自分类Dev

如何在 Ionic2 中隐藏导航栏

来自分类Dev

如何在 ionic 2 中插入视频列表?