解决这个问题的方法是使用Angular的异步管道(async pipe)来从异步函数结果中获取src。下面是一个示例代码：

HTML模板：

组件代码：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {

  imageUrl$: Observable;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.imageUrl$ = this.getImageUrl();
  }

  getImageUrl(): Observable {
    // 发起异步请求获取图片URL
    return this.http.get('https://example.com/api/image-url');
  }

}

在上面的示例中，我们使用HttpClient来发起异步请求获取图片URL，并将其赋值给imageUrl$变量。然后，在HTML模板中使用async管道将imageUrl$流中的值绑定到src属性上。这样，当imageUrl$的值发生变化时，图片的src属性也会自动更新。

请注意，这里使用的是Angular的内置HttpClient来进行异步请求。如果你还没有导入HttpClientModule并在AppModule中进行配置，请确保在组件中正确导入和使用HttpClient。