2017-11-11 27 views
0

私は角度4で作業しています。私は自分のアプリケーションでOwlカルーセルを実装したいと思います。私はこのリンクhttps://www.npmjs.com/package/ng2-owl-carouselを参照してアプリケーションでフクロウカルーセルをインポートしました。Owlカルーセルが角度4で動作していない

しかし、画像は表示されません。 私は私のコードで共有しています:

home.component.ts

import { Component } from '@angular/core'; 
import {Http} from '@angular/http'; 
import {OwlCarousel} from 'ng2-owl-carousel'; 
import { ViewChild } from '@angular/core' 
declare var $:any; 
@Component({ 
    moduleId:module.id, 
    templateUrl:'home.component.html' 
}) 

export class HomeComponent{ 
    public pageTitle:string ='Home'; 
    @ViewChild('owlElement') owlElement: OwlCarousel  

     fun() { 
     this.owlElement.next([200]) 
     //duration 200ms 
     } 
     object = {   
     link: "http://lorempixel.com/100/100" 
     } 

} 

home.component.html

<owl-carousel 
[options]="{items: 3, dots: false, navigation: false}" 

[items]="images" 

[carouselClasses]="['owl-theme', 'row', 'sliding']"> 
<div class="item" *ngFor="let image of images;let i = index"> 
    <div class="thumbnail-image" [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"></div> 
</div> 
</owl-carousel> 

app.module.ts

imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    OwlModule 
] 

enter image description here 次回または前回のみが来ていますが、画像は到着していません。私はアンギュラ4で新しいです。だから私はこの問題を解決することができません。私はリンクを見ましたが、それでも私は解決できません。

angularjs ng-style: background-image isn't working
Angular 2 - background image into a html file using ngStyle

答えて

0

私はあなたのngFor内のimgを追加し、あなたのループ内のすべての画像が表示されない:

 <img src="{{image}}" style="" /> 

 [ngStyle] and not [ng-style] 
+0

動作しません –

0

を使用しますが、CSSが含まれているとjs:here

"scripts": [ 
"../node_modules/jquery/dist/jquery.js", 
"../node_modules/owl.carousel/dist/owl.carousel.js" 

]

"styles": [ "../node_modules/owl.carousel/dist/assets/owl.carousel.css", "../node_modules/owl.carousel/dist/assets/owl.theme.default.css" ]

2] 使用以下 '

`

ような背景画像を使用しません
  1. イメージURLパスが間違っている可能性があります [ng-style] = "{'background-image': 'url(/assets/img/images.jpg)'}"
関連する問題