Vue3+TypeScript+Vite は画像などの静的リソースを動的に導入するためにどのように使用しますか?

質問: require を使用して、Vue3 TypeScript Vite プロジェクトに画像などの静的リソースを動的に導入する方法!

説明: 現在プロジェクトを開発する場合 (プロジェクト フレームワークは Vue3 TypeScript Vite)、静的リソースを動的に導入する必要があります。は img タグです src 属性の値は動的に取得されます これまでのやり方では require で直接導入できます 以下のコード:

<img  class="demo lazy"  src="/static/imghwm/default1.png"  data-src="require(`../../../assets/image/${item.img}`)"   : / alt="Vue3+TypeScript+Vite は画像などの静的リソースを動的に導入するためにどのように使用しますか?" >

以下のコードに波線を記述してエラーを報告しますエラー メッセージは次のとおりです:

Name "require" が見つかりません。ノードのタイプ定義をインストールする必要がありますか? npm i --save-dev @types/node を使用してみてください。 ts(2580)

npm i --save-dev @types/node のインストールと TypeScript 構成ファイル tsconfig.json の後に、構成項目 "type":["node"] を実行すると、波線のプロンプトは消えましたが、 ブラウザ コンソールには引き続きエラーが報告されました 、エラー メッセージは次のとおりです:

解決策:

結論から先に話しましょう。

viteではrequireを使って画像リソースを導入することはできません、 ここでの require は、webpack が提供する読み込み機能のようです。 プロジェクト構築ツールとして webpack を使用せず、Vite を使用しているため、## が提供する静的リソース読み込みに切り替える必要があります。 #Vite. , この部分に関する Vite の公式手順はここにあります。興味のある友人は公式ドキュメントを読むことができます: Vite での静的リソース処理;

ここでは、次のように調整しています。公式サイトのサンプルの使い方を説明すると、

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

わかりにくいかもしれませんが、簡単に言うと、

new URL

は合計 2 つのパラメータを受け取ります。 #最初のパラメータは画像のパス 、ここに require に対応する値があります。2 番目のパラメータは vite のグローバル変数で、直接ハードコーディングされたものとして理解できます import.meta.url

<img  class="t-desktop-icon lazy"  src="/static/imghwm/default1.png"  data-src="getIcon(name)"   : / alt="Vue3+TypeScript+Vite は画像などの静的リソースを動的に導入するためにどのように使用しますか?" >

これを template

の img に動的に導入します。getIcon メソッドは次のとおりです。

function getIcon(name: string) {
    return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}

この方法で動的に実行できます。 Vue3 TypeScript Vite に画像などの静的リソースを導入する

以上がVue3+TypeScript+Vite は画像などの静的リソースを動的に導入するためにどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。