Error: unsafe value used in a resource URL context in angular 2

Question

I am facing an issue in my angular 2 application where the data I save in service is not retrieved in component and then the view(not sure which one is the issue here). I am using an observable and subscribing to it. Below are my files.

Recipe.service.ts:

  @Injectable()
  export class RecipeService {
  constructor(private http: Http){}

  recipes : Array<Recipes> = new Array(20);

  getRecipes(): Observable<Recipes[]>{

    return this.http.get('my api here')
      .map(this.extractData.bind(this))
  }

  private extractData(res: Response) {
    let body = res.json();

    let total_no_of_recipes = body.pagination.count;
    let no_of_recipes;

    for(no_of_recipes = 0; no_of_recipes < total_no_of_recipes; no_of_recipes++) {
      this.recipes[no_of_recipes] = body.data[no_of_recipes].embed_url;
    }
    console.log(this.recipes); ---> Data is printed in console with no problem here
    return this.recipes;
  }

}

app.component.ts:

export class AppComponent implements OnInit{
  observableRecipes: Observable<Recipes[]>;
  recipes: Recipes[];

  constructor(private recipeservice: RecipeService){}

  ngOnInit(){}

  onSubmit(){
    this.observableRecipes = this.recipeservice.getRecipes();
    this.observableRecipes.subscribe(
      recipes => { this.recipes = recipes }
    );
  }
}

app.component.html:

<span>
    <a *ngFor="let recipe of recipes"> 
        {{ recipe.image }}    ---> error is from these two lines where I am accessing the value
        <iframe src="{{ recipe.image }}" style="width: 280px; height: 170px;"></iframe>
    </a>
</span>

Recipe.model.ts:

export class Recipes{
  public iamge: string;

  constructor(image: string){
    this.image = image;
  }
}

Can you please help as I am not able to understand why it is not receiving the data.