vue画像ファイルを置く場所

Vue プロジェクトでは、画像ファイルは静的リソース ディレクトリ (静的またはパブリック)、アセット サブディレクトリ、またはコンポーネント ファイルに配置できます。 src 属性を使用して画像を参照し、画像が配置される場所に応じて異なるパスを使用できます。

Vue 画像ファイルの配置場所

Vue プロジェクトでは、通常、画像ファイルは次の場所に配置されます。

1. プロジェクト ルート ディレクトリ内の静的リソース ディレクトリ

##名前:
• static または public
通常は、画像、フォント、CSS、JavaScript などの静的リソースを配置します

2. assets サブディレクトリ

• src/assets
画像、アイコン、メディア ファイルの配置専用

3. コンポーネント ファイル内

• コンポーネントに埋め込む必要がある画像については、コンポーネント ファイルに配置できます:

  
  src/components/MyComponent.vue

  <code class="html"><template>
  <img src="./image.jpg" alt="My Image">
  </template></code>

  ログイン後にコピー

画像を引用するにはどうすればよいですか?

• src 属性を使用:

  <code class="html"><img src="/static/image.jpg" alt="My Image"></code>

  ログイン後にコピー
• コンポーネント ファイル パスとの相対パス:

  <code class="html"><img src="./image.jpg" alt="My Image"></code>

  ログイン後にコピー
• コンポーネント ファイルに埋め込まれた画像の場合は、相対パスを使用します:

  <code class="html"><img src="@/assets/image.jpg" alt="My Image"></code>

  ログイン後にコピー

以上がvue画像ファイルを置く場所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。