猫头鹰传送带无法在动态图像的角度6中工作

Question

带有静态图像的猫头鹰传送带工作正常。从服务器加载图像后，图像将按原样显示并完全拉伸。

这是组件代码

getProductDetails(pid){
this.httpClient.get(this.baseUrl+`api/products/${pid}`)
  .subscribe(
    (data:any) => {
      if(data){
        this.prodImages = data.images;
        if(this.prodImages != ''){
          $('#product-images-carousel').owlCarousel({
            items: 1
          });
        }
      }
    }
  );

}

这是HTML内容

<div class="owl-carousel owl-theme" id="product-images-carousel">
  <div class="item" *ngFor="let img of prodImages">
    <img src="{{ baseUrl }}{{ img.image_path }}" class="thumbnail-image" alt="">
  </div>
</div>

我在组件中定义了jQuery

declare var $:any;

对于API，我使用的是laravel。 Laravel控制器功能：

public function show($id)
{
    $product = DB::table('products')
    ->where('products.id', $id)
    ->first();
    $images = DB::table('product_images')
    ->where('prod_id', $id)
    ->get();
    $details = array();
    $details['product'] = $product;
    $details['images'] = $images;
    return json_encode($details);
}