How to insert images into <ion-select-option> ? (Image picker)

Issue

I'm working on a form. One of the fields must ask the user to choose an image from a selection. I would like to achieve a similar result.

So I thought of an <ion-select> which would have a corresponding <ion-select-option> for each image, like this

    <ion-item>
          <ion-label>Images</ion-label>
          <ion-select>
            <ion-select-option>
              <ion-img value="image1" src="https://via.placeholder.com/150"></ion-img>
            </ion-select-option>
            <ion-select-option>
              <ion-img value="image2" src="https://via.placeholder.com/150"></ion-img>
            </ion-select-option>
          </ion-select>
    </ion-item>

but I get the following result.

The problem is that the images are not displayed and that the ion-select dialog box is not very suitable for image selection. So I don't know if another ionic component would do a better job or if I should choose a non-ionic solution...

Solution

It is not possible to add images in ion-select-option but you can achieve the same thing by your own by :

1. create a page and make normal ion-list with a ngfor and inside each item put an image and before it a radio button for single choice or checkbox for multichoice.
2. open this page as modal and give this modal custom css in golobsl .scss file as normal select alert like (width:450px;height:350px;).
3. when you open the modal send array that will contain images or api link to requested when modal opens.
4. get the props of modal that is sent with it with navParams and but that you will get what you wanted exactly.

And for any more info write a comment and will be with you anytime.

Answered By - Mostafa Harb