如何在Angular模板中显示从ASP.NET Rest API获取的Base64图片

你的图片无法显示主要有两个核心问题：

1. Angular模板中img的src绑定错误 #

你当前的代码里，src属性写的是硬编码字符串"img.Base64Image"，而不是绑定到变量。浏览器会尝试请求名为img.Base64Image的文件，自然找不到。

修复方式 #

将src改为属性绑定，同时需要为Base64字符串添加Data URI前缀（浏览器需要这个前缀来识别这是Base64编码的图片数据）：

修改Angular模板中的img标签：

<img [src]="'data:image/jpeg;base64,' + img.Base64Image" class="card-img-top" alt="广告图片">

2. 缺少图片MIME类型的兼容性处理 #

如果你的图片包含多种格式（比如PNG、JPG），只固定用image/jpeg可能会导致部分图片显示异常。建议后端补充返回图片的MIME类型：

.NET后端修改 #

更新ImageModel，新增ImageType字段：

public class ImageModel
{
    public int Id { get; set; }
    public string Base64Image { get; set; }
    public string ImageType { get; set; } // 新增字段，存储MIME类型，比如"image/jpeg"、"image/png"
}

修改转换方法：

public static ImageModel ToModel(this AdvertisementImage entity)
{
    // 假设你的AdvertisementImage实体有存储图片类型的字段，比如entity.ContentType
    // 如果没有，可以根据字节数组的文件头判断，或者默认设为"image/jpeg"
    string imageType = entity.ContentType ?? "image/jpeg";
    return new ImageModel 
    { 
        Id = entity.Id, 
        Base64Image = Convert.ToBase64String(entity.Contents),
        ImageType = imageType
    };
}

Angular模板同步修改 #

此时可以动态拼接MIME类型，适配多种图片格式：

<img [src]="'data:' + img.ImageType + ';base64,' + img.Base64Image" class="card-img-top" alt="广告图片">

额外检查点 #

打开浏览器控制台，确认console.log(img)输出的Base64Image字段是否是有效的Base64字符串（没有截断、乱码）。如果字符串无效，需要排查后端转换逻辑是否正确。

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