如何在Angular 4中从ASP.NET Web API加载图片？

我来给你一步步拆解怎么在Angular 4里获取并展示这些上传的图片，结合你的后端代码来看，其实分后端配置和前端处理两部分就行：

你的后端已经把图片存在了~/Image/文件夹，并且把文件名存在了FoodItem.FoodItemImage字段里，但默认情况下ASP.NET Web API不会直接暴露这个文件夹的静态资源，所以得先做配置或者加个接口：

方案1：直接配置静态文件访问（最简单） #

如果不需要对图片访问做权限控制，直接让前端能通过URL访问Image文件夹就行。在Web.config里加这段配置：

<system.webServer>
  <staticContent>
    <!-- 添加上传图片可能用到的格式，比如jpg、png -->
    <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
    <mimeMap fileExtension=".png" mimeType="image/png" />
  </staticContent>
  <handlers>
    <!-- 允许GET请求访问Image文件夹下的所有文件 -->
    <add name="ImageFiles" path="Image/*" verb="GET" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
  </handlers>
</system.webServer>

配置完后，前端就能通过http://你的API域名/Image/图片文件名直接访问图片了。

方案2：新增API接口返回图片（适合需要权限验证的场景） #

如果要限制只有登录用户才能看图片，就加一个HttpGet接口来返回图片流：

[HttpGet]
[Route("api/GetFoodImage/{imageName}")]
// 不需要匿名访问就去掉AllowAnonymous
[AllowAnonymous]
public HttpResponseMessage GetFoodImage(string imageName)
{
    var filePath = HttpContext.Current.Server.MapPath("~/Image/" + imageName);
    if (!File.Exists(filePath))
    {
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
    // 读取图片文件流
    var stream = new FileStream(filePath, FileMode.Open);
    var response = new HttpResponseMessage(HttpStatusCode.OK)
    {
        Content = new StreamContent(stream)
    };
    // 根据实际图片类型设置Content-Type，也可以动态获取文件的MIME类型
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
    return response;
}

假设你已经通过API获取到了FoodItem列表（包含FoodItemImage字段），接下来这样处理：

1. 构造图片访问URL #

在组件里先定义API的基础地址，然后给每个FoodItem拼接图片URL：

// 组件里的代码
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-food-items',
  templateUrl: './food-items.component.html'
})
export class FoodItemsComponent implements OnInit {
  foodItems: any[] = [];
  // 替换成你的API实际域名
  private apiBaseUrl = 'http://localhost:xxxx/';

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 调用获取FoodItem列表的API
    this.http.get<any[]>(`${this.apiBaseUrl}api/FoodItems`).subscribe(items => {
      this.foodItems = items.map(item => {
        // 方案1：用静态文件URL
        item.imageUrl = `${this.apiBaseUrl}Image/${item.FoodItemImage}`;
        // 方案2：用上面新增的API接口URL
        // item.imageUrl = `${this.apiBaseUrl}api/GetFoodImage/${item.FoodItemImage}`;
        return item;
      });
    });
  }
}

2. 在模板里显示图片 #

在组件的HTML模板中，用<img>标签绑定刚才构造的imageUrl：

<div class="food-item" *ngFor="let item of foodItems">
  <h4>{{item.Name}}</h4>
  <!-- 可以加个默认图处理加载失败的情况 -->
  <img [src]="item.imageUrl" alt="Food Image" 
       onerror="this.src='assets/default-food.jpg'" 
       width="150" height="150">
</div>

可选优化：后端直接返回图片URL #

如果想让前端更省心，可以在后端返回FoodItem数据的时候，直接把图片URL构造好返回。比如定义一个DTO类：

public class FoodItemDto
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string FoodItemImage { get; set; }
    // 直接返回可访问的图片URL
    public string ImageUrl { get; set; }
}

然后在获取FoodItem的接口里赋值：

var foodItem = _context.FoodItems.FirstOrDefault(p => p.Id == id);
var dto = new FoodItemDto
{
    Id = foodItem.Id,
    Name = foodItem.Name,
    FoodItemImage = foodItem.FoodItemImage,
    ImageUrl = $"http://你的API域名/Image/{foodItem.FoodItemImage}"
};
return Request.CreateResponse(HttpStatusCode.OK, dto);

这样前端拿到数据后直接用item.ImageUrl就行，不用自己拼接了。

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