Vue 3 Vite - リアルタイムで更新される画像リンク
<p>Vue 3 と Vite を使用しています。 Vite でプロダクションを構築した後、動的 img src で問題が発生しました。静的画像ソースでも問題ありません。 </p>
<pre class="brush:php;toolbar:false;"><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" /></pre>
<p> (menuItem.iconSource には、「my-image.png」などの画像の名前が含まれます)。
この場合、アプリケーションを開発モードで実行するときは機能しますが、運用ビルド後は機能しません。 Vite が本番環境用にアプリケーションをビルドすると、パスが変更されます (すべてのアセットは <code>_assets</code> フォルダーに配置されます)。静的画像ソースは Vite ビルドによって処理され、それに応じてパスが変更されますが、複合画像ソースは変更されません。 <code>/src/assets/images/</code> を定数として受け取るだけで、変更しません (アプリケーションが画像 /src/assets/images/my-image.png に対して 404 not found をスローした場合、ネットワークモニターで確認できます））。
解決策を見つけようとしていて、誰かが <code>require()</code> を使用することを提案しましたが、vite がそれを使用できるかどうかはわかりません。 </p>
