Angular项目产品图片无法显示问题排查求助

我正在通过书籍学习Angular，有一个任务要求制作类似亚马逊的产品组件。每个产品包含图片、产品名称、发布日期、评分组件以及评分数量。我按照所有步骤操作，但编译代码后图片并未显示。能否有人帮忙找出问题所在，谢谢。

app.component.ts #

@Component({
  selector: 'app-root',
  template: `<products></products>`,
})
export class AppComponent {
  title = 'product-app';
}

products.component.ts #

import { ProductService } from "../Services/product.service";

@Component({
    selector:'products',
    template:`
    <h2>Products</h2>
    <div *ngFor="let product of products">
    <product [data]="product"></product>
    </div>
    `,
    providers:[ProductService]
})

export class ProductsComponent{
    products;
    constructor(productService: ProductService){
      this.products = productService.getProducts();
    }
}

product.component.ts #

@Component({
    selector: 'product',
    templateUrl: 'product.component.html',
    styles: [`
        .media {
            margin-bottom: 20px;
        }
    `]
})

export class ProductComponent{
    @Input() data:any;
}

product.component.html #

<a class="pull-left" href="#">
    <img class="media-object" data-src="data.imageUrl" />
  </a>
  <div class="media-body">
    <h4 class="media-heading">{{ data.productName }}</h4>
    {{ data.releasedDate }}
    <rating [rating-value]="data.rating" [numOfReviews]="data.numOfReviews">
    </rating>
    <br />
    {{ data.description }}
  </div>
</div>

product.service.ts #

getProducts() {
    return [
    {
    imageUrl: "http://loremflickr.com/150/150?random=1",
    productName: "Product 1",
    releasedDate: "May 31, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 4,
    numOfReviews: 2
    },
    {
    imageUrl: "http://loremflickr.com/150/150?random=2",
    productName: "Product 2",
    releasedDate: "October 31, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 2,
    numOfReviews: 12
    },
    {
    imageUrl: "http://loremflickr.com/150/150?random=3",
    productName: "Product 3",
    releasedDate: "July 30, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 5,
    numOfReviews: 2
    }];
    }
    }

rating.component.ts #

@Component({
    selector:'rating',
    templateUrl:'rating.component.html'
})

export class RatingComponent{
    @Input('rating-value') rating = 0;
    @Input() numOfReviews = 0;
    
    onClick(ratingValue:any){
        this.rating = ratingValue;
    }
}

rating.component.html #

<i
    class="glyphicon"
    [class.glyphicon-star-empty]="rating < number"
    [class.glyphicon-star]="rating >= number"
    (click)="onClick(number)"
  >
  </i>
</span>

index.html #

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ProductApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

问题排查与修复 #

图片不显示的核心问题有两个：

1. 图片属性使用错误：你用了data-src属性，这是用于懒加载的自定义属性，浏览器不会自动将其识别为图片源，应该使用标准的src属性。
2. 数据绑定语法错误：你直接把data.imageUrl写在引号里，会被当作普通字符串处理，而非Angular表达式。需要用方括号[]包裹属性，让Angular解析绑定的变量。

修改product.component.html中的图片标签：

<img class="media-object" [src]="data.imageUrl" />

另外补充两个影响渲染的小问题：

• product.component.html开头缺少<div class="media">标签，与你在styles中定义的.media样式对应，补全后结构更完整：

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" [src]="data.imageUrl" />
  </a>
  <!-- 其余代码不变 -->
</div>

• rating.component.html缺少星星循环逻辑，需要添加*ngFor生成5个星星图标，否则评分组件无法显示：

<span *ngFor="let number of [1,2,3,4,5]">
  <i
    class="glyphicon"
    [class.glyphicon-star-empty]="rating < number"
    [class.glyphicon-star]="rating >= number"
    (click)="onClick(number)"
  >
  </i>
</span>

内容的提问来源于stack exchange，提问作者Lajibolala