ASP.NET Core 2中如何将img标签相对src转换为外部存储绝对URL

以下是3种不同适用场景的可行方案，可根据你的项目部署方式和技术栈选择：

方案1：Razor Tag Helper 替换（性能最优，推荐） #

该方案无需修改现有视图代码，在视图渲染阶段自动替换路径，性能损耗最低，兼容所有托管环境：

1. 新增CdnImageTagHelper.cs类：

using Microsoft.AspNetCore.Razor.TagHelpers;

[HtmlTargetElement("img", Attributes = "src")]
public class CdnImageTagHelper : TagHelper
{
    // CDN前缀可根据实际需求写到配置文件中，避免硬编码
    private const string CdnPrefix = "https://cdntest.azureedge.net/content/products/";

    [HtmlAttributeName("src")]
    public string Src { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        // 仅替换相对路径图片，已为绝对路径的资源不处理
        if (!string.IsNullOrEmpty(Src) && !Src.StartsWith("http") && !Src.StartsWith("/"))
        {
            output.Attributes.SetAttribute("src", $"{CdnPrefix}{Src}");
        }
        base.Process(context, output);
    }
}

2. 注册Tag Helper：在Views/_ViewImports.cshtml文件中添加如下代码，将你的项目程序集名称替换为实际的项目程序集名：

@addTagHelper *, 你的项目程序集名称

方案2：自定义中间件替换响应内容 #

如果你的项目包含静态HTML文件、非Razor视图渲染的内容，可以使用中间件拦截响应流批量替换路径：

1. 新增CdnImageRewriteMiddleware.cs类：

using Microsoft.AspNetCore.Http;
using System.IO;
using System.Text.RegularExpressions;

public class CdnImageRewriteMiddleware
{
    private readonly RequestDelegate _next;
    private const string CdnPrefix = "https://cdntest.azureedge.net/content/products/";
    // 预编译正则匹配相对路径的img src属性
    private static readonly Regex ImgSrcRegex = new Regex(
        @"<img\s+[^>]*src=""(images/[^""]+)""[^>]*>", 
        RegexOptions.Compiled | RegexOptions.IgnoreCase);

    public CdnImageRewriteMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        // 仅处理HTML类型的响应
        if (context.Response.ContentType?.Contains("text/html") == true)
        {
            // 替换默认响应流以支持读取内容
            var originalBodyStream = context.Response.Body;
            using var responseBody = new MemoryStream();
            context.Response.Body = responseBody;

            await _next(context);

            // 读取响应内容并替换路径
            responseBody.Seek(0, SeekOrigin.Begin);
            var html = await new StreamReader(responseBody).ReadToEndAsync();
            html = ImgSrcRegex.Replace(html, match =>
            {
                var relativePath = match.Groups[1].Value;
                return match.Value.Replace(relativePath, $"{CdnPrefix}{relativePath}");
            });

            // 写回修改后的响应
            context.Response.Body = originalBodyStream;
            await context.Response.WriteAsync(html);
        }
        else
        {
            await _next(context);
        }
    }
}

2. 注册中间件：在Program.cs中，将中间件注册到UseStaticFiles之前：

app.UseMiddleware<CdnImageRewriteMiddleware>();
// 此处保留你原有的StaticFiles配置

方案3：IIS出站规则修复（仅适用于IIS托管场景） #

你之前的规则存在两个问题：一是Action写死了单张图片路径，没有使用正则捕获的分组；二是没有兼容带前缀斜杠的相对路径，修复后的规则如下：

<outboundRules>
    <rule name="cdn" preCondition="html">
        <match filterByTags="Img" pattern="^(/?)images/(.*)" />
        <action type="Rewrite" value="https://cdntest.azureedge.net/content/products/images/{R:2}" />
    </rule>
    <preConditions>
        <preCondition name="html">
            <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
        </preCondition>
    </preConditions>
</outboundRules>

该方案仅在使用IIS托管站点时生效，Kestrel跨平台部署场景不支持该配置。

替换完成后如果不需要继续从本地提供图片服务，可删除原有静态文件配置中对应图片路径的处理逻辑，减少不必要的资源开销。

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