How to use images inside the selected component in Ionic 2

Question

I am trying to put an image inside the Select component in Ionic 2: I put the source image files in the www/img folder in my Ionic 2 project. However, using a simple img -tag does not display the 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> 

Does anyone have any ideas?

Answer 1

The ion-select component does not allow direct tuning for itself, and everything that you add to ion-select and ion-option, which does not correspond to the ion documentation, will be ignored in the generated output.

You cannot add a class or style to a component.

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

To show images in options, 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); } 

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

You can also check the response on Ionic to select color input.

Answer 2

On your basis, I developed a shorter solution！

The prepareImageSelector method is used as the Click event of the control

Thanks a

  image: string = 'English'; 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(); if (image == this.image) { optionLabelElement.innerHTML += '<img src="assets/img/English.png" style="width:20px;height:20px;float:right;"/>'; } } } }, 100); } 

Answer 3

I got it like this.

 <ion-select (click)="loadFlags()" formControlName="pays" value="select-country"> <ion-select-option value="select-country" >select your country </ion-select-option> <ion-select-option *ngFor="let country of countries" value="{{country.name}}">{{country.name}}</ion-select-option> </ion-select> 

And this is my .ts file

 loadFlags() { setTimeout(function(){ let radios=document.getElementsByClassName('alert-radio-label'); for (let index = 1; index < radios.length; index++) { let element = radios[index]; element.innerHTML=element.innerHTML.concat('<img class="country-image" style="width: 30px;height:16px;" src="'+countries[index-1].flag+'" />'); } }, 1000); } 

The timeout should allow the system to create alert components. My Json is an array with elements like {name: "Cameroon", flag: " https: // restcountries. Ec / data /cmr.svg "}