Base64格式二维码Outlook正常显示Gmail不显示，求全客户端兼容方案

Gmail及部分邮件客户端不支持将Base64编码的图片直接作为<img>标签的src值，这是导致你的二维码在Gmail中无法显示的核心原因。Outlook支持这类内联资源，但这并非通用标准。

解决方案 #

将生成的二维码图片上传到Azure Blob存储，使用公开可访问的HTTP/HTTPS URL作为图片源，这是所有主流邮件客户端都兼容的方案。

具体步骤及代码修改 #

1. 生成二维码图片流，而非直接输出Base64编码
2. 将图片上传至你的Azure Blob存储容器
3. 返回图片的公开访问URL（或带有效期的SAS URL），替换邮件模板中的Base64字符串

修改后的代码示例 #

using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Formats.Png;
using QRCoder;

public async Task<string> QRGenerate(Model model)
{
    string qrData = $"abcd";
    // 替换为你的Azure存储连接字符串和容器名称
    string storageConnectionString = "你的Azure存储连接字符串";
    string containerName = "qrcode-container";
    // 生成唯一的Blob名称，避免重复
    string blobFileName = $"qrcode-{Guid.NewGuid()}.png";

    using (var qrGenerator = new QRCodeGenerator())
    {
        var qrCodeData = qrGenerator.CreateQrCode(qrData, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new QRCode(qrCodeData);
        
        // 生成二维码图片流
        using (var image = qrCode.GetGraphic(20, Color.Black, Color.White, true))
        using (var stream = new MemoryStream())
        {
            await image.SaveAsync(stream, new PngEncoder());
            stream.Position = 0;

            // 上传到Azure Blob存储
            var blobServiceClient = new BlobServiceClient(storageConnectionString);
            var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
            // 确保容器存在（可选，若已提前创建可移除）
            await containerClient.CreateIfNotExistsAsync(PublicAccessType.Blob);
            
            var blobClient = containerClient.GetBlobClient(blobFileName);
            await blobClient.UploadAsync(stream, new BlobUploadOptions
            {
                HttpHeaders = new BlobHttpHeaders
                {
                    ContentType = "image/png"
                }
            });

            // 返回公开访问URL（容器需设置为Blob/Container级匿名访问）
            return blobClient.Uri.ToString();
            
            // 若容器不公开，生成7天有效期的SAS URL替代上面的返回
            // var sasUri = blobClient.GenerateSasUri(BlobSasPermissions.Read, DateTimeOffset.UtcNow.AddDays(7));
            // return sasUri.ToString();
        }
    }
}

关键配置说明 #

• Blob容器权限：若使用公开URL，需将容器的公共访问级别设置为Blob或Container（在Azure Portal的存储容器设置中配置）；若不想公开图片，使用SAS URL并设置合理的有效期（比如邮件的预期有效期）。
• 邮件模板修改：将原<img src="{{QRstring}}">改为<img src="{{QRUrl}}" alt="二维码">，用返回的URL填充{{QRUrl}}。

验证 #

完成修改后，测试Gmail、Outlook、Apple Mail等主流客户端，二维码均能正常加载显示。

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