我正在尝试将图像放入Select
Ionic 2中的组件中:我已经将图像源文件放入www/img
Ionic 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] 删除。
我来说两句