HTML页面URL域名替换方案及Razor页面自定义前缀指向Azure Blob存储的实现方法

嘿，这个需求我太懂了！之前帮团队做静态资源迁移到Azure Blob的时候就遇到过类似的场景，既要统一管理域名，又要方便后续变更，咱们来看看几种靠谱的实现方式：

方法一：通过配置文件+依赖注入实现动态拼接 #

这种方式最直接，适合大多数场景，步骤也简单：

• 第一步，把Blob存储的根域名存到appsettings.json里，以后要改直接改配置就行：

{
  "BlobStorage": {
    "BaseDomain": "https://MyDomain.blob.core.windows.net/"
  }
}

• 第二步，创建一个对应的配置类来绑定这个配置，方便在代码里调用：

public class BlobStorageOptions
{
    public string BaseDomain { get; set; } = string.Empty;
}

• 第三步，在项目的启动文件（比如Program.cs）里注册这个配置，让依赖注入容器能识别它：

builder.Services.Configure<BlobStorageOptions>(builder.Configuration.GetSection("BlobStorage"));

• 第四步，在你的Razor页面里注入这个配置，然后拼接图片路径：

@inject IOptions<BlobStorageOptions> BlobOptions

<!-- 这样写就会自动拼接成完整的Blob存储URL -->
<img src="@($"{BlobOptions.Value.BaseDomain}images/icons/arrow.svg")" alt="箭头图标" />

方法二：自定义扩展方法/Tag Helper，让写法更简洁 #

如果你觉得每次拼接字符串有点麻烦，想让写法更贴近你说的@/风格，可以试试这两种方式：

方式A：自定义HTML扩展方法 #

写一个扩展方法，把拼接逻辑封装起来，用的时候直接调用：

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.Extensions.Options;

namespace YourProjectNamespace.Extensions
{
    public static class BlobUrlHelper
    {
        public static string BlobUrl(this IHtmlHelper htmlHelper, string relativePath)
        {
            var blobOptions = htmlHelper.ViewContext.HttpContext.RequestServices
                .GetRequiredService<IOptions<BlobStorageOptions>>();
            return $"{blobOptions.Value.BaseDomain}{relativePath.TrimStart('/')}";
        }
    }
}

然后在Razor页面里引入这个命名空间，就可以用简洁的写法了：

@using YourProjectNamespace.Extensions

<img src="@Html.BlobUrl("images/icons/arrow.svg")" alt="箭头图标" />

方式B：自定义Tag Helper（更贴近原生HTML写法） #

如果想让写法更像原生的src属性，可以自定义一个Tag Helper，比如给img标签加个blob-src属性：

using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.Options;

namespace YourProjectNamespace.TagHelpers
{
    [HtmlTargetElement("img", Attributes = "blob-src")]
    public class BlobImageTagHelper : TagHelper
    {
        private readonly BlobStorageOptions _blobOptions;

        public BlobImageTagHelper(IOptions<BlobStorageOptions> blobOptions)
        {
            _blobOptions = blobOptions.Value;
        }

        [HtmlAttributeName("blob-src")]
        public string BlobSrc { get; set; } = string.Empty;

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var fullUrl = $"{_blobOptions.BaseDomain}{BlobSrc.TrimStart('/')}";
            output.Attributes.SetAttribute("src", fullUrl);
        }
    }
}

然后在_ViewImports.cshtml里注册这个Tag Helper，这样所有页面都能直接用：

@addTagHelper *, YourProjectNamespace

之后在Razor页面里就可以这么写：

<img blob-src="images/icons/arrow.svg" alt="箭头图标" />

总结一下，这几种方法的核心都是把Blob域名抽离成可配置的参数，以后域名变更只需要修改配置文件，不用逐个页面修改路径，非常省心。

备注：内容来源于stack exchange，提问作者David Thielen