Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/content/docs/ja/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,14 @@ export default defineConfig({
});
```

:::note
`pnpm`のような[厳格なパッケージマネージャー](https://pnpm.io/pnpm-vs-npm#npms-flat-tree)を使用している場合は、Astroの依存関係であるにもかかわらず、プロジェクトにSharpを手動でインストールする必要があるかもしれません。

```bash
pnpm install sharp
```
:::

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
:::

noteの終了タグがないみたいです

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ありがとうございます!こちら kyosuke さんが同じ指摘をされており、上にあったためそちらをコミットしました🙏

Comment thread
morinokami marked this conversation as resolved.
## コミュニティインテグレーション

Astroプロジェクトで画像を最適化したり、画像を扱ったりするための、サードパーティの[コミュニティインテグレーション](https://astro.build/integrations?search=images)があります。
Expand Down Expand Up @@ -701,3 +709,22 @@ Astro v2.xで画像インテグレーションを使用していた場合は、
ブログ記事のカバー画像など、コンテンツコレクションのエントリに関連付けられた画像を、現在のフォルダからの相対パスによりフロントマターに宣言できるようになりました。

コンテンツコレクションの新しい`image`ヘルパーにより、Zodを使用して画像のメタデータを検証できるようになりました。コンテンツコレクションで画像を使用する方法について、詳しくは[こちら](#コンテンツコレクションと画像)を参照してください。

### Astro v3.0での画像インポートの扱い

Astro v3.0で、以前の画像をインポートした際の挙動を維持しなければならず、画像URLの文字列が必要な場合は、以下のように画像パスの末尾に`?url`を追加してください。

```astro title="src/pages/blog/MyImages.astro"
---
import Sprite from '../assets/logo.svg?url';
---
<svg>
<use xlink:href={Sprite + '#cart'} />
</svg>
```

この方法により、URLの文字列を取得できます。なお、Astroは開発中に`src/`パスを使用しますが、ビルド時には`/_astro/cat.a6737dd3.png`のようなハッシュ化されたパスを生成することに注意してください。

画像オブジェクト自体を直接扱いたい場合は、`.src`プロパティにアクセスできます。この方法は、Core Web Vitalsメトリクスのための画像サイズの調整や、CLSの防止などのタスクに最適です。

新しいインポートの挙動に移行する場合は、`?url`と`.src`の両方を組み合わせることが、シームレスに画像を扱うための正しい方法かもしれません。