現時点では私のCSSとimgタグの内部にdata:
を通してbase64イメージを使用しています。これはファイル全体にbase64コードを含めることで本当に乱雑になることが想像できるので、それをインポートする方法があるかどうかを知りたい外部ファイルからどうやってwebpackでこれらを処理するのですか?他のファイルのbase64イメージを含む?
1
A
答えて
0
のWebPACKのurl-loaderは、まさにこの目的のために作られています!
ちょうどあなたのWebPACK-config設定のローダーにこれを追加し、それを設定するには:
{
test: /\.(svg|jpg|png|gif)$/,
loader: 'url?limit=10000',
}
URLローダは、それのサイズが指定した制限値を下回っている場合は、/インポートが必要なファイルのデータURIを返します。それ以外の場合は、ファイルをバンドルしてURLを返します。
制限はバイト単位で指定されているため、10000はおよそ10kB未満のファイルがデータURIとして返されることを意味します。制限を指定しないと、すべてがデータURIとしてエンコードされます。私はあなたが小さなファイルのためにそれを使用することをお勧めします。
これで、セットアップが完了したら、var smallImageUri = require('./smallImage.png');
は必要なものを正確に提供するはずです。 smallImage.png
が設定された制限を下回る場合はデータURI、大きい場合はバンドルされた画像のURL。
0
gulp-css-base64プラグインを使用すると、画像が保存されているフォルダからすべての画像を読み取ることができます。 gulpタスクを実行するたびに、新しいイメージでcssファイルを更新します(または現在のイメージを更新します)。
gulp.task('default', function() {
return gulp.src('src/css/input.css')
.pipe(cssBase64({
baseDir: "../../images",
maxWeightResource: 100,
extensionsAllowed: ['.gif', '.jpg']
}))
.pipe(gulp.dest('dist'));
});
関連する問題
- 1. C#他のファイルを含む
- 2. pythonと他のファイルを含む
- 3. イメージを含むウォニスニスのキャッシュ?
- 4. Angularを含むファイルをアップロードして他のフォームデータを含む投稿を
- 5. のアップロードをBase64イメージ
- 6. 他のテンプレートを含む
- 7. 他のLaTeXドキュメントを含む
- 8. 動的オブジェクトへのポインタを含む他のベクトルを含むベクトル
- 9. ボタンとイメージを含むツールチップ
- 10. cmake他のディレクトリのh個のファイルを含む
- 11. デルファイのexeと他のファイルを含むセットアップファイルを作る方法
- 12. 他のファイルへの特別な単語を含む
- 13. 設定ファイルを含むアプリケーションを他のユーザに配布する
- 14. 他のライブラリファイルを含むJARファイルを作成する
- 15. 他のテーブルの列を含むINSERT-OUTPUT
- 16. 他のオブジェクトを含むリストのUnity GameObject
- 17. 他のdivを含むdivの横スクロール
- 18. Azure:ピクチャを含むbase64の文字列をデコードする
- 19. Python 3.5:ファイル名にアンダースコアを含むイメージを開きますか?
- 20. ファイルを含む
- 21. テンプレートを含むjavascriptファイルを含む
- 22. Base64イメージのAngular2 net :: ERR_UNKNOWN_URL_SCHEME
- 23. Base64イメージの埋め込み
- 24. 他のUIViewを含むUIViewサブクラス
- 25. jsonmodel - モデルカスケード(他のモデルを含むモデル)
- 26. 他のコントロールを含むカスタムGroupBoxコントロール
- 27. バイト配列をbase64でエンコードされたイメージに読み込む
- 28. .cppファイルのヘッダーファイルを含む
- 29. jarのexeファイルを含む
- 30. はLinuxのファイルを含む
webpackについてはわかりませんが、イメージをpngまたはjpgファイルとして保存して、あなたのCSSを 'url( 'yourFile.png')'に設定してください;-)もっと真剣に、なぜdataURIバージョン? – Kaiido
または、2つの.cssファイルを使用できます。 1つのファイルにすべてのスタイルが含まれます。また、他のファイルには、関連するスタイルのbase64イメージが含まれています。 –
@Kaiidoはこのようにして、httpリクエストを追加します+スタイルシートと一緒にイメージを読み込むようにします。 – Ilja