vue パッケージ化後の無効な静的リソースイメージの問題を解決する方法

以下に、vue パッケージ化後の無効な静的リソース画像の問題を解決する記事を紹介します。これは参考になるものであり、皆さんのお役に立てれば幸いです。

1. 問題の説明

プロジェクト開発において、npm run build を介してファイルをパッケージ化し、ファイルをサーバーに置くと、通常、イメージの失敗の問題が発生し、コンソールに特定のメッセージが表示されます。画像が見つかりません (404 エラー)。これらの画像は src で導入された画像、または CSS で定義された背景画像である可能性があります。画像が表示できるかどうかは、静的リソース ファイルの場所とインポートされたパスに直接関係します。以下は、私のプロジェクトの 1 つにおけるファイル ストレージとパスの書き込み方法です。

2. 解決策の 1 つ

静的リソースの静的保存場所は src ディレクトリに配置されます

なぜ src ディレクトリに配置されるのか疑問に思うかもしれません。 srcと同じディレクトリに置くことはできないのでしょうか？さて、最初はsrcと同じディレクトリに入れていたのですが、あるcssファイルに背景画像を導入した際に、このように導入したところ画像が無効になってしまいました

これは実践で証明されています。記述が間違っていると、パッケージ化するときに大量のエラー (css-loader エラーなど) が発生し、プロジェクトが実行されなくなります。

そこで、次の書き込み方法を使用しました:

この書き込み方法も許可されていません。その理由は、静的リソースファイル static が src ディレクトリになく、Vue では src ディレクトリにあるためです。はルート ディレクトリ (src. ディレクトリ) に対する相対パスであるため、上記の書き込み方法を使用する場合は、src ディレクトリに static を配置する必要があります。上の図 1 と図 2 に示すように

注: static/images/user.png を /static/images/user.png として記述することはできません。そうしないと、画像は依然として無効になります。

上記はファイルの保存場所とCSSへの画像の導入についてですが、imgタグで画像を導入する場合は、静的リソースの場所を直接記述するだけで比較的簡単です。フォルダーは src 内に置くこともできますが、src と同じ階層に置くこともできますが、上記の状況を避けるためには、src 内に置くだけです。

img は画像を導入します:

上記は画像の失敗の問題を解決する方法です。 もちろん、静的リソース ディレクトリを src と同じディレクトリに配置する必要がある場合は、解決策もあります。画像のインポート方法など（私は実践していませんが）、自分で試してみることができます。

上記は私があなたのためにまとめたものです。

関連記事:

vueでローカル静的画像パスを実装する(詳細チュートリアル)

Webpackの設定に従ってフォントアイコンが表示されない問題の解決方法(詳細チュートリアル)

BootStrapユーザーの使用React Experience フレームワーク内 (詳細なチュートリアル)

以上がvue パッケージ化後の無効な静的リソースイメージの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。