Vue3 では、画像などのインポートに require を使用できません。画像などの静的リソースを動的にインポートするには、newURL を使用する必要があります。

1. vue3 を使用して初めてプロジェクトを開発する場合、require ('image path') を使用すると、ブラウザーがエラーを報告します。

キャッチされません (約束内) ReferenceError: require が定義されていません

 解決：

1. require は webpack が提供する読み込み機能ですが、vue3 プロジェクトは vite と一致するため、ここでは vite が提供する静的リソース読み込みメソッドを使用する必要があります。

公式ドキュメント: https://vitejs.cn/guide/assets.html#the-public-directory

 使用法：

新しい URL('パス', import.meta.url).href

図に示すように:

 上記の require を新しい URL の形式に変更すると、ページは静的リソースを正常に読み込むことができます。