您看到的错误（Failed to construct 'URL': Invalid URL）通常表明传递到URL对象或类似函数的值不是正确的URL格式。
从你给出的例子来看：

var encodedContainerName = encodeURIComponent("");
var encodedBlobName = encodeURIComponent("");
this.imageUrl = "http://127.0.0.1:10000/devstoreaccount1/" + encodedContainerName + "/" + encodedBlobName;

encodedContainerName和encodedBlobName都是空的。这可能是你问题的根源。
确保您正在为容器名称和blob名称赋值：

var containerName = "myContainer";
var blobName = "myImage.jpg";
var encodedContainerName = encodeURIComponent(containerName);
var encodedBlobName = encodeURIComponent(blobName);
this.imageUrl = "http://127.0.0.1:10000/devstoreaccount1/" + encodedContainerName + "/" + encodedBlobName;

如果这仍然不能解决问题，请考虑以下几点：
1.CORS配置：确保Azurite已正确配置，以允许来自Angular应用程序域的跨域请求。
1.内容交付：有时，内容提供的方式很重要。如果图像的内容类型没有正确发送，浏览器可以拒绝加载它们。确保Azurite正在发送适当的内容头。
1.网址验证：构建URL后，将其记录（console.log(this.imageUrl)）并手动检查URL是否正确。尝试直接在浏览器中访问此URL。
1.备选图片标签：不要直接将URL绑定到<img>标签的src，而是尝试使用Angular的绑定：

<img [src]="imageUrl">

1.清理URL：Angular有一个安全功能，可以清除潜在的不安全值。如果Angular将URL标记为不安全，您可能必须绕过安全性并自行清理URL。使用Angular的DomSanitizer：

import { DomSanitizer } from '@angular/platform-browser';

// ... in your component:

constructor(private sanitizer: DomSanitizer) {}

getSafeUrl() {
    return this.sanitizer.bypassSecurityTrustUrl(this.imageUrl);
}

然后，在模板中：

<img [src]="getSafeUrl()">

请记住，绕过Angular内置的安全检查可能会使您的应用程序暴露于各种漏洞，因此请始终确保您正在清理和加载到应用程序中的URL。