Vueの背景画像をパッケージ化した後にアクセスパスが正しくなくなる問題を解決する方法

この記事は主に、Vue 背景画像をパッケージ化した後のアクセス パス エラーの問題の解決策を紹介します。内容は非常に優れているので、参考として共有します。

ケース環境

vue-cliスキャフォールディングを通じて作成されたVueプロジェクト

プロジェクトをパッケージ化するときに背景画像のパスエラーの問題が発生しました。Googleで検索したところ、画像サイズの制限を超えていることがわかりました。小さな原因

まず第一に、エラーポイントはURLローダーにあります。

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

上記の URL ローダー設定の説明は、プロジェクト内の通常のルールで終わる形式のすべてのファイルを照合するルールです。写真 (png、jpg、jpeg、gif、svg)。次に、url-loader を使用して処理します。また、10000B以下のファイルをbase64トランスコードする場合は、画像をbase64形式に変換するという処理規則があります。イメージが 10KB を超える場合は、utils.assetsPath('img/[name].[hash:7].[ext]') ディレクトリに個別にパッケージ化されます (これは build/utils.js および config/ で確認できます) index.js パスは static/img ディレクトリ、イメージ名はハッシュ化後の値です。なぜこのディレクトリが見つからなかったのかというと、ルートディレクトリ以下に static ディレクトリが作成されます。最後に、それについては後で説明します)、このようなディレクトリを作成すると、その後、すべての画像アクセス パスは、対応する static/img/'画像名' になります。この時点で、10KB 未満のピクチャは Base64 に変換され、10KB を超えるピクチャはピクチャのパスが static/img/'ピクチャ名' に変更されると判断できるので、引き続きアクセス パスを明確にしていきます。

// 目前我们的目录结构
index.html
static
  |--img
    |--'picname'
  |--css
    |--app.css
  |--js
    |--app.js

img は HTML タグであり、そのパスは static/img/'画像名' にアクセスすると、画像に正しくアクセスできるため、 img は OK ですが、css ディレクトリの下に static ディレクトリがないため、app.css が static/img/'画像名' にアクセスするとアクセス エラーになります。これにより、パスアクセスが失敗するという問題が発生しました。

解決策

1. 小さい画像を背景画像として使用します (推奨):

画像画像として 10 KB を超える画像がある場合は、10 KB より小さい画像を背景画像として使用します。

2. URL ローダーの制限値を変更します (推奨されません):

上記の分析から、画像が Base64 に変換されると、バックグラウンドでパス エラーの問題が発生しないことがわかります。画像をbase64に変換すると、この問題を防ぐことができます。エラーが発生した場合は、制限値を最大の背景画像の大きい値に変更し、それをB

の単位に変換するだけです。CSSを個別にパッケージ化しないでください。推奨されません):

css を直接渡す -loader と style-loader が js にパッケージ化され、js が自動的に style タグを作成します。このようにして、背景画像へのアクセス パスは、index.html パスを経由します。ただし、この解決策はお勧めできません。 js が大きくなりすぎるため、画像が大きすぎる場合と同じ理由で、base64 に変換することはお勧めできません。

4. 画像アドレスのパスには絶対パスを使用します (推奨)

推奨: 小さい画像を背景画像として使用し、大きい画像には img タグを使用します。まず最初に、背景画像とイメージ画像の違いを明確にする必要があります。誰もが理解しているように、背景画像は実際のコンテンツとは関係のないものに使用されます。コンテンツに関連するもので img タグを使用する必要がある場合、それは Web ページ構造のコンテンツとしてカウントされます。変更された画像はできるだけ小さくする必要があり、画像圧縮やその他の戦略を使用して画像のサイズを小さくすることもできます。

推奨されない: 制限値の変更が推奨されない理由は、URL ローダーの設定がプロジェクト全体の画像に対するものであるためです。制限値を変更すると、プロジェクト内の img タグを持つ画像も対象となるためです。 HTML も Base64 に変換され、base64 の場合 変換のデメリットは、大きな画像を Base64 に変換すると、js ファイルが大きくなりすぎて、画像のサイズが大きくなることです。 jsをロードする時間。

base64について

利点:base64は、ページまたはjsを読み込むときに一緒に読み込まれるため、画像を参照する際の単一のhttpリクエストが削減されます。 Web 側のパフォーマンスの最適化を理解している学生は、各 http リクエストの確立に一定の時間がかかることを知っています。小さい画像リクエストの場合、http リクエストの確立時間は画像のダウンロード自体よりも長くなる可能性があります。したがって、小さな画像の Base64 トランスコーディングは、http リクエストを最適化し、ページ レンダリングを高速化する手段となります。

短所: Base64 の短所は、イメージ自体のサイズが大きくなることであり、その結果、JS リクエストが増加することで、確立にかかる時間を完全に補うことができます。追加の http リクエストはコスト効率が高くなります。しかし、大きな画像の場合、このトレードオフは価値がありません。

例を教えてください

例: (次のデータはすべて無造作にシミュレートされています。アイデアを見てください)
http の作成時間が毎回 0.1 秒、ネットワーク送信が 100KB/s であると仮定します。 Base64 に変換されるたびにボリュームが 100 ずつ増加します。10 のうち 20 が 10 KB の画像であり、base64 に変換されると 12 KB になります。サイズが 12KB 増加するため、0.12S 増加します。したがって、base64 への変換は 0.08 秒に最適化できます。

httpを介した100KBの画像のリクエスト速度は1.1秒です。 Base64に変換するとサイズが120KBとなり、jsのサイズが120KB増えるため、読み込み時間は1.2秒増加します。このように計算すると、base64 に変換した後、ページの読み込み速度を最適化することはできませんが、読み込み速度が 0.1 秒遅くなり、コスト効率が悪くなります。

考え:

開発プロセスでは、読み込み速度に対処することに加えて、並列ダウンロードの問題も考慮する必要があります。一つのjsにまとめられている場合は、jsがダウンロードされるまで画像はダウンロードされません。つまり、base64に変換した後、jsと画像が連続してダウンロードされると考えられます。 http リクエストを使用すると、js と並行して画像をダウンロードできます。実際には、よりコスト効率を高めるには、より小さな画像が必要です

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

vueプロジェクトの構築、パッケージ化、公開プロセスの紹介

v-vueでローカル静的画像をロードする方法

vue 画像のトリミングとアップロード機能の紹介それらをサーバーに送信します

以上がVueの背景画像をパッケージ化した後にアクセスパスが正しくなくなる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。