2017-02-15 14 views
1

私は自分のプロジェクトでangular2とwebpack2を使用しています。angular2とwebpackの動的srcから画像を読み込む方法は?

私の同僚がAngular2 QuickStartからプロジェクトを開始し、Webpack環境に移動します。私は、コンポーネントのtemplatsをロードし、画像やフォントを抽出するためにurl-loaderを使用するhtml-loaderを使用

{ 
    test: /\.html$/, 
    loader: 'html-loader' 
}, 
{ 
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
    use: 'url-loader?limit=1000&name=assets/[name].[hash].[ext]' 
}, 

テンプレートは、このようなものです:

<section class="creation-mobile"> 
    <img src="../../../images/camera/cn/mobile/creation.jpg" alt="" class="img-cn"> 
    <img src="../../../images/camera/en/mobile/creation.jpg" alt="" class="img-en"> 
</section> 

私はそれを構築する場合、WebPACKのが画像を見つけることができますasstes/にエクスポートします。

私はこのようなテンプレートを満たすまでは正常に動作します:

<li *ngFor="let i of [1,2,3]" class="item{{i}} m1-view"> 
    <div class="{{lang}}-video-view"> 
     <img src="../../../images/os/{{lang}}/medium/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg"> 
     <video class="video-medium" preload="auto" src="../../../videos/os/{{lang}}/medium/one-step-{{i}}{{deviceRatio == 1?'':'@2x'}}.mp4" [video-play]="onestepVideoState[i-1]"></video> 
     <img src="../../../images/os/{{lang}}/large/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg"> 
     <video class="video-large" preload="auto" src="../../../videos/os/{{lang}}/large/one-step-{{i}}{{deviceRatio == 1?'':'@2x'}}.mp4" [video-play]="onestepVideoState[i-1]"></video> 
    </div> 
    <a class="replay" [innerHTML]="os.replay.title" [ngClass]="{'active': onestepReplayState[i-1]}" (click)="onestepReplay(i-1)"></a> 
</li> 

../../../images/os/{{lang}}/medium/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpgなどのsrcが異なるリソースを取得するために{{lang}}{{i}}{{deviceRatio == 1?'':'@2x'}}が含まれており、url-loaderは、URLのこの種を解決することはできません。

*ngForを広げてngifを使用し、<img>タグを十分に書き込んでイメージをインポートする必要があります。

angle2とwebpackにこの種のURLを読み込む方法はありますか?

Add1を:、宣言することを忘れて申し訳ありませんlangdeviceRatioブラウザ環境に依存し、その値は時にビルド確認されていませんされています。 langの値はcnenのいずれかになるので、最後のdistディレクトリに../../../images/os/en/medium/..xxx.jpg../../../images/os/cn/medium/..xxx.jpgの両方をロードします。

+0

[angle2でウェブパックから動的画像パスを選択的に除外](http://stackoverflow.com/questions/38205980/selectively-exclude-dynamic-image-paths-from-webpack-角度付き2) – smnbbrv

答えて

0

ビルドの設定によっては、JSファイル内にrequire.contextを使用して画像を前もって設定する必要があります。

あなたがしているのは、イメージを再帰的に含むフォルダが必要であり、希望の場所で利用できるようにすることです。 詳細はこちらhttps://webpack.js.org/guides/dependency-management/#require-context

関連する問題