Vue 3 Vite - リアルタイムで更新される画像リンク

Question

Vue 3 と Vite を使用しています。 Vite でプロダクションを構築した後、動的 img src で問題が発生しました。静的画像ソースでも問題ありません。

<img src="/src/assets/images/my-image.png" alt="画像" class="logo"/>< ;/前>
<p>開発モードで実行している場合と vite ビルド後の場合、どちらの場合でも正常に動作します。ただし、動的に読み込まれるデータベース（メニューアイコン）にいくつかの画像名が保存されています。この場合、次のようにパスを記述する必要があります: </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' menuItem.iconSource" />

(menuItem.iconSource には、「my-image.png」などの画像の名前が含まれます)。 この場合、アプリケーションを開発モードで実行するときは機能しますが、運用ビルド後は機能しません。 Vite が本番環境用にアプリケーションをビルドすると、パスが変更されます (すべてのアセットは _assets フォルダーに配置されます)。静的画像ソースは Vite ビルドによって処理され、それに応じてパスが変更されますが、複合画像ソースは変更されません。 /src/assets/images/ を定数として受け取るだけで、変更しません (アプリケーションが画像 /src/assets/images/my-image.png に対して 404 not found をスローした場合、ネットワークモニターで確認できます））。 解決策を見つけようとしていて、誰かが require() を使用することを提案しましたが、vite がそれを使用できるかどうかはわかりません。

Answer 1

2022 アップデート: Vite 3.0.9 Vue 3.2.38

動的 src バインディングのソリューション:

＃＃＃１。静的 URL を使用します

リーリー ＃＃＃２。

動的

URLと相対パスの使用 リーリー 3.

動的

URLと絶対パスを持つ 集計の制限により、すべてのインポートはインポート ファイルを基準にして開始する必要があり、変数で開始することはできません。

エイリアス

@/

を /src に置き換える必要があります。 リーリー

---

2022 答え: クイック 2.8.6 Vue 3.2.31

---

ローカルビルドと本番ビルドでうまくいく方法は次のとおりです:

リーリー

SSRでは動作しないので注意してください

---

Vite ドキュメント: 新しい URL