開発モードで実行している場合と vite build 後のどちらの場合でも正常に動作します。でもいくつかイメージがある">
Vue 3 と Vite を使用しています。 Vite でプロダクションを構築した後、動的 img src で問題が発生しました。静的画像ソースでも問題ありません。
< ;/前>
開発モードで実行している場合と vite ビルド後の場合、どちらの場合でも正常に動作します。ただし、動的に読み込まれるデータベース(メニューアイコン)にいくつかの画像名が保存されています。この場合、次のようにパスを記述する必要があります:
(menuItem.iconSource には、「my-image.png」などの画像の名前が含まれます)。 この場合、アプリケーションを開発モードで実行するときは機能しますが、運用ビルド後は機能しません。 Vite が本番環境用にアプリケーションをビルドすると、パスが変更されます (すべてのアセットは
_assets
フォルダーに配置されます)。静的画像ソースは Vite ビルドによって処理され、それに応じてパスが変更されますが、複合画像ソースは変更されません。/src/assets/images/
を定数として受け取るだけで、変更しません (アプリケーションが画像 /src/assets/images/my-image.png に対して 404 not found をスローした場合、ネットワークモニターで確認できます))。 解決策を見つけようとしていて、誰かがrequire()
を使用することを提案しましたが、vite がそれを使用できるかどうかはわかりません。
2022 アップデート: Vite 3.0.9 Vue 3.2.38
動的 src バインディングのソリューション:
###1。静的 URL を使用しますリーリー ###2。
動的URLと相対パスの使用 リーリー3.
動的URLと絶対パスを持つ集計の制限により、すべてのインポートはインポート ファイルを基準にして開始する必要があり、変数で開始することはできません。
エイリアス
@/を
/src
に置き換える必要があります。 リーリー
2022 答え: クイック 2.8.6 Vue 3.2.31
ローカルビルドと本番ビルドでうまくいく方法は次のとおりです:
リーリー SSRでは動作しないので注意してくださいVite ドキュメント: 新しい URL