Unable to add image beside select option

ionic-v1
1

How to locate flags image beside the country selected? I try to use <img ng-scr"{{market.flag}}> but it only shows the text.Please advice

html

  <div class="row">
    <div class="col col-25" style="padding-top: 5px;">
      Country:
    </div>
    <div class="col">
      <select ng-model="selectedMarket" ng-change="selectMarket(selectedMarket)">
        <option ng-repeat="market in markets" value="{{market.value}}">{{market.name}}</option>
      </select>
    </div>
  </div>

app.js

  .constant('$marketProvider' , {
    asx: {
      name: "Australia",
      value: "asx",
      flag: "img/flags/AUS.png",
      ]
    },
    idx: {
      name: "Indonesia",
      value: "idx",
      flag: "img/flags/ID.png",

      ]
    },
2

This is only text, what did you try to make “flag” display?

3

I try a few ways

<option ng-repeat="market in markets" value="{{market.value}}"><img src={{market.flag}}></img>{{market.name}}</option>

<option ng-repeat="market in markets" value="{{market.value}}"><img ng-src={{market.flag}}></img>{{market.name}}</option>

<option ng-repeat="market in markets" value="{{market.value}}"><img ng-src={{market.flag}} />{{market.name}}</option>

all unable to shows the flags

4

Did you try to display the flags outside of <option>, in a normal list for example? Are you sure the path is correct this way?

5

I try display outside option
if I use the path <img scr = "img/flags/ID.png"></img>, I able to display the flags.

If I use<img src={{market.flag}}><img>, fail to display the flags, it is blank.

6

Try https://ionicframework.com/docs/api/components/img/Img/

7

is it application for ionic 1 as well? I try this even unable to show the flag
<ion-img width="80" height="80" src="img/flags/ID.png"></ion-img>

https://snag.gy/l6vIpa.jpg

8

Oh sorry, didn’t notice the Ionic1 category.

Then try:
<img ng-src="{{market.flag}}" />

Please also check in browser dev tools if it actually tries to request the image and can’t find the file or if there is no request at all. You did that before, right?

9

I try before but image unable to load.

if I can display if I call directly "img/flags/ID.png", thus I believe the link in app.js is correct.
The problem is I want to show the flags in option.

If I unable to show flags beside the option, I would like to display the flags after user selected it at the side menu. Example, if the user selected Australia, it will show Australia flag.

10

You want to do 2 things at once right now: 1) Display an image 2) inside a select/option. First make sure that 1) works, before you try 2). It should be trivial to just load the image directly in a list. If this doesn’t work, you don’t even have to think about the select/option thingie.

Both should be possible. I am not a big help on the syntax as I haven’t used Ionic 1 for a few years now, but I can absolutely tell you that 1) does work, no problem.

11 
[quote="bkcollection, post:1, topic:86677"]
.constant('$marketProvider' , {
    asx: {
      name: "Australia",
      value: "asx",
      flag: "img/flags/AUS.png",
      ]
    },
    idx: {
      name: "Indonesia",
      value: "idx",
      flag: "img/flags/ID.png",

      ]
    },
[/quote]

IS it <img ng-src="{{market.flag}}" /> or <img ng-src={{market.flag}} /> is the correct syntax?
I try both but both are not display

12

https://docs.angularjs.org/api/ng/directive/ngSrc

Did you check if the page requests something and just doesn’t find the image under that path?

13

I am not sure how to check it.
I confirm by display {{market.flag}} in text and it shows correct path. But if I replace with <img ng-src="{{market.flag}}" />, the option become blank

14

<div ng-repeat="market in markets" value="{{market.value}}"><img ng-src="{{market.flag}}" /></div> to replace option will shows all the flags.

I just need to show one flag which is selected