URL to image in angular js

Question

EDIT: TIL that you don't need to add the url in the scope. Also, to be careful with the key, thanks.

I'm trying to show some images and its names in an HTML5 doc, here's the index:

    <div ng-repeat="producto in productos">     
            <figure class="floating">
              <img ng-src="{{ image }}" alt="Macaque in the trees" class="rcorners3" style='width:100%;' border="0" alt="Null">
              <figcaption>{{ name }}</figcaption>
            </figure>
    </div>

At the top I have:

    <body ng-app="app"> 


<div class="main" ng-controller="app">

And this is how the MainController.js looks like:

app.controller('app', ['$scope', function ($scope) {
    $scope.productos = [{
            name : 'Management Guides',
            image : url('managemant-guides.jpg')
        }, {
            name : 'Leaflets',
            image : url('managemant-guides.jpg')
        }, {
            name : 'Production Charts',
            image : url('managemant-guides.jpg')
        }, {
            name : 'Technical Guides',
            image : url('managemant-guides.jpg')
        }, {
            name : 'Poultry News',
            image : url('managemant-guides.jpg')
        }
    ];
}]);

I tihnk I'm failing at the ng-src point, not

Mathew Berg · Accepted Answer · 2015-07-21 11:39:04Z

4

You should be using:

 ng-src="{{ producto.image }}"

answered Jul 21, 2015 at 11:39

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

1 Comment

1x2x3x4x Over a year ago

Thank you, after aplying your solution I was getting a white page, saying that the URL is not defined, so I modified the array in the controller as well. Thank you for your help.

Ved · Accepted Answer · 2015-07-21 12:08:14Z

2

You are making a mistake. Use 'producto' as key

<div ng-repeat="producto in productos">     
                <figure class="floating">
                  <img  ng-src="{{ producto.image }}" alt="Macaque in the trees" class="rcorners3" style='width:100%;' border="0" alt="Null">
                  <figcaption>{{ producto.name }}"</figcaption>
                </figure>
        </div>

edited Jul 21, 2015 at 12:08

answered Jul 21, 2015 at 11:40

Ved

12.1k5 gold badges46 silver badges61 bronze badges

2 Comments

1x2x3x4x Over a year ago

Thank you, after aplying your solution I was getting a white page, saying that the URL is not defined, so I modified the array in the controller as well. Thank you for your help.

1x2x3x4x Over a year ago

Edit, actually ng-src="{{ producto.name }} is wrong, no ng-src is needed for the .name, it works with just {{ producto.name}}

Collectives™ on Stack Overflow

URL to image in angular js

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related