Blazor Server端如何正确展示Azure存储中不同朝向的图片

问题核心原因 #

1. 跨域资源无权限读取EXIF元数据：Azure存储的图片属于跨域资源，未配置跨域规则的情况下，浏览器和JS脚本都无法读取图片内置的EXIF方向信息，导致方向调整逻辑失效。
2. 原有逻辑不匹配：JS代码直接把处理后的图片插入body节点，没有对应到Blazor循环生成的每个图片容器，调用逻辑错位。

方案1：修正blueimp Load-Image调用逻辑 #

第一步：配置Azure存储CORS规则

在Azure存储账户的CORS配置中，添加你站点域名的允许规则：

• 允许的源：填写你的站点域名（如https://your-domain.com）
• 允许的动词：勾选GET
• 暴露的头：填写*即可
• 最大年龄：设置为86400

第二步：修改JS代码

function RotateImage(fileURL, targetContainer) {
    loadImage(
        fileURL,
        function (img) {
            // 将处理后的图片插入对应Blazor容器
            targetContainer.prepend(img);
        },
        { 
            orientation: true,
            meta: true, // 必须开启才能读取EXIF元数据
            crossOrigin: 'anonymous' // 标识为跨域匿名请求
        }
    )
}

第三步：修改Blazor代码

<div class="photosGridDiv">
    @foreach (var file in currentFiles)
    {
        <div @ref="@file.ContainerRef">
            <br />
            <a href="@file.filePath">@file.fileName</a>
        </div>
    }
</div>

@code {
    // 给你的文件实体类新增容器引用属性
    public class StorageFile 
    {
        public string filePath { get; set; }
        public string fileName { get; set; }
        public ElementReference ContainerRef { get; set; }
    }

    List<StorageFile> currentFiles = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 页面渲染完成后再批量调用JS处理图片
            foreach (var file in currentFiles)
            {
                await JSRuntime.InvokeVoidAsync("RotateImage", file.filePath, file.ContainerRef);
            }
        }
    }
}

方案2：原生浏览器方案（更简单，无需第三方库） #

现代Chrome、Edge浏览器已经默认支持根据EXIF信息自动调整图片方向，只需适配跨域配置即可：

第一步：同上配置Azure存储CORS规则

第二步：添加CSS样式

.photo {
    image-orientation: from-image; /* 明确指定读取图片内置方向 */
    max-width: 100%; /* 可配合你的布局需求调整 */
}

第三步：修改Blazor代码直接输出图片

<div class="photosGridDiv">
    @foreach (var file in currentFiles)
    {
        <div>
            <img src="@file.filePath" crossorigin="anonymous" class="photo" />
            <br />
            <a href="@file.filePath">@file.fileName</a>
        </div>
    }
</div>

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