Vue3 - vite はローカル イメージ メソッドを導入し、ローカルの静的リソース イメージをページに導入するための詳細なチュートリアルを提供し、UI フロントエンド コンポーネント ライブラリのイメージ属性でローカル イメージを使用できない問題を解決します (ローカル開発かパッケージかに関係なく)。デプロイメントでは、ローカル イメージのパスは通常利用可能です)

序文

Webpack では通常、静的画像を導入するために使用されますrequire()が、この方法は vite では機能しません。

この記事では、vue3+vite プロジェクトの開発にローカル イメージ (静的リソース) の導入を実装していますが、パッケージ化後もビルドは正常に実行されます。

通常のタグの使用をサポートする<img>ほか、UI コンポーネント ライブラリのさまざまな「ピクチャ属性」をパラメータとして使用することもサポートします。

---

以下の図に示すように、導入と運用を 100% 成功させるための手順に従ってください。

実装コード