如何从服务器目录获取图片并在Angular 14中正确显示

你遇到的问题有两个核心原因，分别对应Angular的安全绑定规则和前端访问服务器文件的限制，下面是具体解决步骤：

1. 修复Angular的URL绑定错误 #

控制台的unsafe:SafeValue must use [property]=binding错误，是因为你用了插值表达式{{}}来绑定src属性，而safeUrl管道返回的是Angular的安全值对象，必须用属性绑定语法才能正确识别：

修改模板中的img标签：

<!-- 错误写法 -->
<img src="{{ photo.url | safeUrl }}" />

<!-- 正确写法 -->
<img [src]="photo.url | safeUrl" alt="{{ photo.title }}" />

2. 解决服务器本地图片无法被前端访问的问题 #

你的Web API返回的C:/photos/xxx.jpg是服务器本地磁盘路径，前端浏览器没有权限直接访问服务器的本地文件系统，必须通过HTTP接口让Web API把图片内容返回给前端。有两种常用方案：

方案一：创建图片下载API接口 #

在Web API中新增一个接口，根据文件名读取服务器本地图片并返回文件流：

[HttpGet]
[Route("getImage")]
public IActionResult GetImage(string fileName)
{
    // 服务器上图片的根目录
    string photoRootPath = "C:/photos";
    string fullPath = Path.Combine(photoRootPath, fileName);

    if (!System.IO.File.Exists(fullPath))
    {
        return NotFound("图片不存在");
    }

    // 根据图片类型设置正确的Content-Type，这里以jpg为例
    return File(new FileStream(fullPath, FileMode.Open), "image/jpeg");
}

同时修改GetPhotos方法，返回这个API的访问路径而非本地磁盘路径：

[HttpGet]
[Route("getPhotos")]
public List<Photos> GetPhotos()
{
    return new List<Photos>() { 
        new Photos { 
            id = 1, 
            cost=10.2d, 
            photographer = "bill", 
            title="photo 1", 
            url = "/api/photos/getImage?fileName=img20230110_21490374.jpg" 
        } 
    };
}

方案二：配置静态文件服务（更简便） #

如果你的图片不需要权限验证，可以直接把图片目录配置为Web API的静态文件目录，让前端通过HTTP URL直接访问：

在Web API的Program.cs中添加静态文件配置：

using Microsoft.AspNetCore.StaticFiles;
using System.IO;

var builder = WebApplication.CreateBuilder(args);

// ... 其他服务配置 ...

var app = builder.Build();

// 配置静态文件访问，映射服务器本地图片目录到/photos路由
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider("C:/photos"),
    RequestPath = "/photos",
    // 可选：设置默认的文件类型
    ContentTypeProvider = new FileExtensionContentTypeProvider()
});

// ... 其他中间件配置 ...

app.Run();

此时修改GetPhotos方法返回静态文件的URL即可：

[HttpGet]
[Route("getPhotos")]
public List<Photos> GetPhotos()
{
    return new List<Photos>() { 
        new Photos { 
            id = 1, 
            cost=10.2d, 
            photographer = "bill", 
            title="photo 1", 
            url = "/photos/img20230110_21490374.jpg" 
        } 
    };
}

这种情况下，因为返回的是标准HTTP URL，甚至可以不用safeUrl管道，Angular会自动识别为安全地址。

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