# Unable to add image beside select option

**URL:** <https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677>\
**Category:** ionic-v1\
**Created:** [April 16, 2017, 10:07am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677 "2017-04-16T10:07:10Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 16, 2017, 10:07am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/1 "2017-04-16T10:07:10Z")

</div>

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",

      ]
    },
```

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 16, 2017, 11:30am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/2 "2017-04-16T11:30:22Z")

</div>

> [@bkcollection](#):
>
> \<option ng-repeat=“market in markets” value=“{{market.value}}”\>{{market.name}}\</option\>

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

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 12:51am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/3 "2017-04-17T00:51:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 17, 2017, 12:55am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/4 "2017-04-17T00:55:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 12:58am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/5 "2017-04-17T00:58:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 17, 2017, 1:50am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/6 "2017-04-17T01:50:20Z")

</div>

Try [https://ionicframework.com/docs/api/components/img/Img/](https://ionicframework.com/docs/api/components/img/Img/)

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 1:55am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/7 "2017-04-17T01:55:00Z")

</div>

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](https://snag.gy/l6vIpa.jpg)

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 17, 2017, 2:02am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/8 "2017-04-17T02:02:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 2:12am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/9 "2017-04-17T02:12:50Z")

</div>

> [@Sujan12](#):
>
> \<img ng-src=“{{market.flag}}” /\>

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.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 17, 2017, 2:15am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/10 "2017-04-17T02:15:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 2:21am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/11 "2017-04-17T02:21:23Z")

</div>

```
[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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 17, 2017, 2:23am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/12 "2017-04-17T02:23:59Z")

</div>

[https://docs.angularjs.org/api/ng/directive/ngSrc](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?

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 2:38am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/13 "2017-04-17T02:38:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [April 17, 2017, 2:46am UTC](https://forum.ionicframework.com/t/unable-to-add-image-beside-select-option/86677/14 "2017-04-17T02:46:17Z")

</div>

`<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