how to add image inside an array in angular?

Question

Here is my plunker link: https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

I'm trying to develop an application where I have elements inside an array. When I click on each element details will be displayed, but I'm not able to display image,

How can I add an image attribute inside an array and again display it using html page?

script.js:

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
    $scope.items = [{
        name: 'Iphone',price:70000,rating:'*****',image: 'how to add image here'
    }, {
        name: 'Oneplus',price:60000,rating:'****',image: 'how to add image here'
    }, {
        name: 'Samsung',price:50000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Sony',price:40000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Moto',price:20000,rating:'****',image: 'how to add image here'
    }];
});

app.config(function($routeProvider) {
    $routeProvider
      .when('/item/:itemName/:itemPrice/:itemRating/:itemImage', {
          templateUrl: 'details.html',
          controller: 'ItemCtrl'
      });
});

app.controller('ItemCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
      $scope.itemName = $routeParams.itemName;
      $scope.itemPrice = $routeParams.itemPrice;
      $scope.itemRating = $routeParams.itemRating;
      $scope.itemImage = $routeParams.itemImage;
  }
]);

index.html

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="script.js"></script>
    <body ng-app="myApp" ng-controller="mobileController">
        <h2> Welcome to Mobile Store</h2>
        <p>Search:<input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="item in items|filter:test">
                <a href="#/item/{{item.name}}/{{item.price}}/{{item.rating}}/{{item.image}}">{{ item.name }}</a>
            </li>
        </ul>
        <div ng-view></div>
    </body>
</html>

details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<p>{{itemImage}}</p>

replace how to add image here with /pah/to/image.png then you can use <img src="{{itemImage}}"> — Weedoze
– Weedoze, Commented Mar 3, 2017 at 14:01

coderboy_4200 · Accepted Answer · 2017-03-03 14:25:52Z

1

The better way to add images is to use ng-src in angularjs.e.g.You can give a relative path to your images. My images sit in a content folder './content/Images/T1_1.jpg' and in your html add <img ng-src="{{item.imageSrc}}" alt="{{item.p_variation}}">

answered Mar 3, 2017 at 14:25

coderboy_4200

531 silver badge6 bronze badges

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

2 Comments

saisree reddy Over a year ago

is there any way that i can add images in plunker and then give the path?

coderboy_4200 Over a year ago

you can use base64-encoded data-uri or use imgur to do that for you. plnkr i guess doesnt support non-text formats

Manikandan Velayutham · Accepted Answer · 2017-03-03 14:14:27Z

0

Your detail.html change to like below..

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
 <p>ItemRating:{{itemRating}}</p>
  <img ng-src="itemImage">

answered Mar 3, 2017 at 14:14

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

3 Comments

Manikandan Velayutham Over a year ago

your normal path is enough. like image:"path1/photo.png"

saisree reddy Over a year ago

you mean the path of images in my desktop?

Manikandan Velayutham Over a year ago

Put your images in your project folder.. Then give path.

Nitesh Goyal · Accepted Answer · 2017-03-03 14:29:39Z

0

Make some small changes to your details.html and script.js like this -

script.js

  app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',price:70000,rating:'*****',image: 'www.w3schools.com/css/trolltunga.jpg'
  }, {
    name: 'Oneplus',price:60000,rating:'****',image: 'path/to/imgresource'
  }];
});

details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<img ng-src="{{item.image}}" alt="some text">

Note: Images should be accessed from your local server. For Ex-

http://localhost:8080/img/foo.png

answered Mar 3, 2017 at 14:29

Nitesh Goyal

5775 silver badges11 bronze badges

3 Comments

saisree reddy Over a year ago

image is not getting displayed,some text in the alt is getting displayed

saisree reddy Over a year ago

is it because plunker does not support images?

Nitesh Goyal Over a year ago

Try using the path in your project instead of plunker as will not understand the relative path of the image that you might be giving in the "ng-src". Or please share the image <img> tag you are using.

Olezt · Accepted Answer · 2017-03-03 14:51:48Z

0

I don't think the way you are trying to do it is possible because your image path will also have /.

Have a look at this working plunkr. https://plnkr.co/edit/rCO96V?p=preview

Pass only the name or some id

 <li ng-repeat="item in items|filter:test"><a href="#/item/{{item.name}}">{{ item.name }}</a>

and then

angular.forEach($scope.items, function(item) {
     if(item.name==$routeParams.itemName){
          $scope.itemName = item.name;
          $scope.itemPrice = item.price;
          $scope.itemRating = item.rating;
          $scope.itemImage = item.image;
    }
});

answered Mar 3, 2017 at 14:51

Olezt

1,7581 gold badge18 silver badges31 bronze badges

2 Comments

saisree reddy Over a year ago

hey thanks! but how did u give that google image link ?I'm trying to give iPhone images link but I'm not getting in png format

Olezt Over a year ago

As you can see at the plunkr I have posted at script.js file I set the image path and then at details.html <img src="{{itemImage}}">

Harsh Patel · Accepted Answer · 2023-02-16 18:24:56Z

0

name: 'Iphone',
rating: '*****',
image: ../assets/imagelink.jpg

imagelink is whatever image file is

ex: I have an image called silk-images.png in the array would be

image: ../assets/silk-images.png

in my HTML I had an array for *ngFfor='let stores of store' {{stores.image}}

edited Feb 16, 2023 at 18:24

Harsh Patel

6,87810 gold badges44 silver badges77 bronze badges

answered Feb 10, 2023 at 19:37

Lupita CorreaSalinas

11 bronze badge

Collectives™ on Stack Overflow

how to add image inside an array in angular?

5 Answers 5

2 Comments

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related