Vue3+vite は静的リソースを動的に参照し、アセット フォルダーから画像を動的にインポートするいくつかの方法

ここではまず次のことを想定します:
静的ファイル ディレクトリ:src/assets/images/
ターゲットの静的ファイルは次の場所にあります: src/assets/images/home/home_bg.png

<img :src="require('@/assets/images/home/home_bg.png')" />

 require によって動的に導入されましたが、エラーが見つかりました: require is not defind。これは、require が Webpack に属するメソッドであるためです

最初の方法 (単一のリソース ファイルの場合) 

import homeBg from 'src/assets/images/home/home_bg.png'

<img :src="homeBg" />

 2 番目の方法 (複数のリソース ファイルに適用可能、ファイル パスを動的に渡す)

 新しい URL() + import.meta.url

 src ディレクトリに util フォルダーを作成し、そのフォルダー内に utils.ts ファイルを作成します。

// 获取assets静态资源
const getAssetsFile = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};

export default {
  getAssetsFile,
};

 vueファイルにインポートする

<script setup lang="ts">
 import util from 'src/util/utils'
</script>

使い方

<template>
 <img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>

3 番目の方法 (複数のリソース ファイルに適用できます。この方法でインポートされたファイルは特定のフォルダー パスに指定する必要があります。渡される変数にはファイル名のみを指定でき、ファイル パスを含めることはできません)

 たとえば、assets/images ファイルの下にホーム フォルダーがあります。

// 获取assets静态资源
const getAssetsFile = (url: string) => {
  const path = `../assets/images/home/${url}`;
  const modules = import.meta.glob("../assets/images/home/*");
  return modules[path].default;
};

export default {
  getAssetsFile,
};

<script setup lang="ts">
 import util from 'src/util/utils'
</script>

<template>
 <img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>

背景画像をインポートする場合（必ず相対パスを使用してください）

.bg-box{
  background-image: url('../../assets/images/bg.png');
}