使用AngularJS将图像添加到网页中

Question

为什么我的图片显示为文件徽标？链接如下

This is how my image shows up when I add it

这是我的图像JS（AngularJS）

1982

这是我添加图片的HTML

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

Answer 1

检查控制台是否有错误，但可能是因为路径不正确。

如果他们在您的图片文件夹中，您想要放置该路径：

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

Answer 2

为什么不使用ng-src directive？ 即

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

Answer 3

它只将图像名称传递给ng-src，你需要在将图像名称传递给花括号之前写入保存图像的整个路径。

Answer 4

您应该使用图像的绝对路径或相对路径，例如

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

如果你使用最新的angularjs 4.x和cli，你需要将图像路径添加到angular-cli.json中的“assets”部分：

“apps”：[     {       ......

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

}