Vite/Vue 3: 画像ソースをプロップとして使用する場合の「未定義の要件」

Question

Vue CLI から Vite CLI に切り替え、Vue 3 のコンポジション API から SFC スクリプト セットアップ API に切り替えました。

以前はどうだったか

公式 Vue CLI を使用する場合、props を介してパスのファイル名を渡すことで画像ソースをインポートできます。 リーリー

次に、次のように呼び出します:

リーリー

Vite への移行後に発生したエラー

しかし、Vite CLI に移行してから、「Uncaught ReferenceError: require is not Defined」というエラーが発生しました。私のファイルでは、次のようなスクリプト設定構文が使用されるようになりました:

リーリー

私が試したこと

相対パスを使用してアセットフォルダーからファイルを直接インポートしようとしましたが、うまくいきました。ただし、import ステートメントを使用して props のパスを指定することはできません。

リーリー リーリー

テンプレートで import ステートメントも試してみましたが、コードはコンパイルすらされませんでした:

リーリー ＃＃＃私は何か見落としてますか？おそらくこれを実現できるプラグインが存在するでしょうか?

Answer 1

私もこの問題に遭遇しました。これを検索したところ、この github の問題コメント , p> に基づいて見つかりました。

これに関する詳細については、「 機能 | Vite - 静的リソース」を参照してください

いくつか検索した結果、私にとってうまく機能するこの Vue 3 コード例を見つけました。リンク リーリー リーリー