0

I have a jade file, where I parse the user data and construct the page. There is a place in this file where I loop through the users' images and render them to the page:

.picture-item(ng-repeat='m in userProfile.media')
  img.picture(src='{{m.mediaUrl}}')

But the problem is, even though this line of code shows the image on the page, it send another request to server like below:

http://localhost:3000/%7B%7Bm.mediaUrl%7D%7D

This happens on: http://localhost:3000/profile page. If I go to a user's profile, let's say: http://localhost:3000/profile/some_username, then the code above sends a request like: 

http://localhost:3000/profile/%7B%7Bm.mediaUrl%7D%7D

m.mediaUrl are user's instagram image urls.

What could be the problem here? Any ideas?

Thanks in advance.

Sebastian
  • 7,729
  • 2
  • 37
  • 69
0xmtn
  • 2,625
  • 5
  • 27
  • 53

1 Answers1

1

You are running into a known issue with AngularJS client side late binding.

You can use another attribute for the img tag instead:

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

   .picture-item(ng-repeat='m in userProfile.media')
     img.picture(ngSrc='{{m.mediaUrl}}')
Sebastian
  • 7,729
  • 2
  • 37
  • 69
  • This solved the issue, but lemme ask you another one: what about `.picture(style="background-image: url({m.mediaUrl})")`? This does the exact same thing. I changed it to `img.picture(ng-src="{{m.mediaUrl}}")` and it works but got curious about what about the css structured in a way that we cannot change `background-image` to `ng-src`? what should I do then? – 0xmtn Apr 01 '15 at 08:27