開発モードで実行している場合と vite build 後のどちらの場合でも正常に動作します。でもいくつかイメージがある"> Vue 3 Vite - リアルタイムで更新される画像リンク-PHP中国語ネットワークQ&A
Vue 3 Vite - リアルタイムで更新される画像リンク
P粉511749537
P粉511749537 2023-08-27 22:32:33
0
1
432

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 がそれを使用できるかどうかはわかりません。

P粉511749537
P粉511749537

全員に返信 (1)
P粉310931198

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

いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!