CODEWITHSUNDEEP
javascripthtmlangularjs
Parth Parulekar
Parth Parulekar

Reputation: 107

Adding Image into Webpage using AngularJS

Why does my image show up as a file logo? link below

This is how my image shows up when I add it

This is my JS for the image (AngularJS)

{
    name: 'Screw',
    price: 1,
    description: 'A small item drilled into objects',
    specs: '1 centimeter',
    images: [
                {
                    full: "1024px-Phillips_screw.jpg"
                }
            ]
}

This is my HTML for adding the image

<img ng-src="{{product.images[0].full}}"/>

Upvotes: 2

Views: 2519

Answers (4)

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Why not use ng-src directive? ie.

<div ng-init="myVar='pic_angular.jpg'">
    <h1>Angular</h1>
    <img ng-src="{{myVar}}">
</div>

Upvotes: 2

Blockchain Nerd
Blockchain Nerd

Reputation: 437

Your should use absolute or relative path for the image, like 

<img src="/images/{{product.images[0].full}}"/>

If you use the latest angularjs 4.x with cli, you need to add the images path to "assets" section in angular-cli.json:

"apps": [ { ......

  "assets": [
    "assets",
    "favicon.ico",
    "images"
  ],
  ........

}

Upvotes: 0

Ritesh Khatri
Ritesh Khatri

Reputation: 1301

Its passing only name of image into ng-src, you need to write whole path of image where it saved before u pass image name into curly braces.

Upvotes: 0

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

Check the console for the error, but it's probably because the path is incorrect.

If they're in your images folder you'd want to put that path:

<img src="/images/{{product.images[0].full}}"/>

Upvotes: 2

Related Questions