Angular集成CKEditor5上传图片后无法显示的ASP.NET Core API问题

问题根源：你的GetImage接口错误地将FormFile对象序列化为JSON元数据返回，而非输出图片的二进制数据流，导致CKEditor无法解析并渲染图片。

修改后的获取图片接口代码 #

[HttpGet("{id}")]
public async Task<IActionResult> GetImage(long id)
{
    var myImage = await blogAppDbContext.Images.FindAsync(id);
    if (myImage != null && myImage.ImageData != null)
    {
        // 直接返回图片二进制流，指定Content-Type为image/jpeg
        return File(myImage.ImageData, "image/jpeg", "my.jpg");
    }

    return StatusCode(StatusCodes.Status500InternalServerError,
                            "Error occured during retriving image");
}

关键修改点说明 #

• 移除创建FormFile对象的冗余代码，直接使用数据库中存储的ImageData字节数组。
• 使用ASP.NET Core的File()方法返回图片流：
  • 第一个参数是图片的二进制数据
  • 第二个参数是图片的MIME类型（若支持多格式，建议在上传时保存原文件的ContentType并动态获取）
  • 第三个参数是可选文件名，浏览器默认会以inline方式直接显示图片而非触发下载

可选优化：支持多图片格式 #

如果系统需要处理png、gif等多种图片格式，建议修改Image实体添加ContentType字段：

public class Image
{
    public long Id { get; set; }
    public byte[] ImageData { get; set; }
    public string ContentType { get; set; } // 新增字段，存储原文件的MIME类型
}

上传接口中保存原文件的ContentType：

var uploadedFile = Request.Form.Files[0];
// ...
Image newImage = new Image
{
    Id = default,
    ImageData = ms.ToArray(),
    ContentType = uploadedFile.ContentType // 保存原文件的MIME类型
};

获取接口动态使用存储的ContentType：

return File(myImage.ImageData, myImage.ContentType, "image");

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