Angular use ng-src in an image tag within ng-repeat

Question

I have used ng-src on img tags many times within ng-repeats with success, but for some reason I can't get this one to work.

I have an API call that returns some data, and for each item in the return, I basically do this:

<div ng-repeat="item in APIreturn">
    <img ng-src="{{item.url}}" />
</div>

I have also tried src="{{item.url}}", ng-src="item.url" and so forth. I've verified that the url that is being used is valid, and works fine in src="{{item.url}}" outside of the ng-repeat.

Any ideas why it would be different in the ng-repeat?

Current HTML

<table ng-repeat="user in userInformation">
    <tr>
        <td>UserName:</td>
        <td>{{user.UserName}}</td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>{{user.Address}}</td>
    </tr>
    <tr>
        <td>Gender:</td>
        <td>{{user.Gender}}</td>
    </tr>
    <tr>
        <td>Image:</td>
        <td><img ng-src"user.image" /></td>
    </tr>
</table>

Do you see url if you use just <td>{{ user.image }}</td>? user.image or user.Image? — Anton Bessonov
– Anton Bessonov, Commented Jun 9, 2016 at 20:06
Sorry, yes it is showing. But the same attribute doesn't show the image in the image tag. — Jaromjj
– Jaromjj, Commented Jun 9, 2016 at 20:08

Anton Bessonov · Accepted Answer · 2016-06-09 20:19:57Z

2

You say you don't see the url if you put just <td>{{ user.image }}</td>. This indicate you access not existing property on yout object. Try json filter:

<td>{{ user | json }}</td>

to see more of your object. As I can see, you use capital letters, but user.image is lower cased.

EDIT: here is a working plunkr.

EDIT2: you missing assign sign.

edited Jun 9, 2016 at 20:19

answered Jun 9, 2016 at 20:13

Anton Bessonov

9,8933 gold badges41 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromjj Over a year ago

I was mistaken, and tried to correct my comment. The image that I just posted above shows your suggestion of printing just the url. It is being printed, and the img src is using the exact same attribute that is being printed below it.

Anton Bessonov Over a year ago

See my edit2. You wrote ng-src"{{ instead of ng-src="{{

Jaromjj Over a year ago

Thanks Anton! That was it.

Hadi · Accepted Answer · 2016-06-09 20:15:37Z

2

try change to this. i think you forgot put = after ng-src .

  <tr>
    <td>Image:</td>
    <td><img ng-src = "user.image" /></td>
  </tr>

edited Jun 9, 2016 at 20:15

answered Jun 9, 2016 at 20:02

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

1 Comment

Jaromjj Over a year ago

Thank you for catching that. That was it.

Sombriks · Accepted Answer · 2016-06-09 20:28:32Z

0

See Strict Contextual Escaping service.

Angular unsafes img src attributes so you'll need to trust it in order to make your images available.

Another approach is to use css to render the images:

answered Jun 9, 2016 at 20:28

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

Comments

groenhen · Accepted Answer · 2020-03-24 09:36:13Z

0

For table, in ng-repeat, you have to use {{}} this interpolation in order to access the src file.
Try this one:

<td><img ng-src = "{{user.image}}"/></td>

Let me know if any issues.

edited Mar 24, 2020 at 9:36

groenhen

3,02725 gold badges51 silver badges69 bronze badges

answered Mar 24, 2020 at 8:13

Omkar Hande

911 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular use ng-src in an image tag within ng-repeat

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related