嘿，这个问题我之前帮不少开发者踩过坑——核心问题出在你的API返回的响应头设置上，浏览器正是根据这些头信息来决定是在线显示图片还是触发下载操作的。下面给你一步步拆解解决方案：

1. 确保设置正确的Content-Type #

浏览器需要明确知道返回的资源是PNG图片，所以必须把响应的Content-Type设为image/png，而不是默认的二进制流类型。以ASP.NET Core的Controller为例，代码示例如下：

public IActionResult GetPngImage()
{
    // 替换成你获取图片字节流的逻辑
    byte[] imageBytes = RetrievePngFromSource();
    // 第一个参数是字节流，第二个就是指定的Content-Type
    return File(imageBytes, "image/png");
}

2. 调整Content-Disposition响应头 #

这是最关键的一步！如果你的API之前设置了Content-Disposition: attachment，浏览器会直接触发下载；你需要把它改成inline，明确告诉浏览器「在线显示这个资源」。代码示例：

public IActionResult GetPngImage()
{
    byte[] imageBytes = RetrievePngFromSource();
    
    var contentDisposition = new ContentDispositionHeaderValue("inline")
    {
        FileName = "my-image.png" // 可选：给图片命名，不影响显示逻辑
    };
    Response.Headers.Add(HeaderNames.ContentDisposition, contentDisposition.ToString());
    
    return File(imageBytes, "image/png");
}

3. 前端调用的小细节 #

确保你的前端链接正确应用了target="_blank"，并且直接指向API接口：

<!-- 静态链接示例 -->
<a href="/api/Images/GetPngImage" target="_blank">打开图片</a>

如果是用JS动态打开新标签页，也要直接跳转API地址：

// 动态打开示例
window.open('/api/Images/GetPngImage', '_blank');

4. 排查其他潜在问题 #

• 直接在浏览器地址栏访问API接口，看是否能正常显示图片：如果能，说明API设置没问题，再检查前端的target是否正确应用；如果不能，说明图片字节流可能损坏，或者响应头仍有问题。
• 检查浏览器下载设置：部分浏览器可能有特殊的下载规则，但只要响应头正确，一般不会强制下载图片。

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