diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 4b625555f7bf4..10acd0602ad4f 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -515,6 +515,14 @@ export default defineConfig({ }); ``` +:::note +`pnpm`のような[厳格なパッケージマネージャー](https://pnpm.io/pnpm-vs-npm#npms-flat-tree)を使用している場合は、Astroの依存関係であるにもかかわらず、プロジェクトにSharpを手動でインストールする必要があるかもしれません。 + +```bash +pnpm install sharp +``` +::: + ## コミュニティインテグレーション Astroプロジェクトで画像を最適化したり、画像を扱ったりするための、サードパーティの[コミュニティインテグレーション](https://astro.build/integrations?search=images)があります。 @@ -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'; +--- + + + +``` + +この方法により、URLの文字列を取得できます。なお、Astroは開発中に`src/`パスを使用しますが、ビルド時には`/_astro/cat.a6737dd3.png`のようなハッシュ化されたパスを生成することに注意してください。 + +画像オブジェクト自体を直接扱いたい場合は、`.src`プロパティにアクセスできます。この方法は、Core Web Vitalsメトリクスのための画像サイズの調整や、CLSの防止などのタスクに最適です。 + +新しいインポートの挙動に移行する場合は、`?url`と`.src`の両方を組み合わせることが、シームレスに画像を扱うための正しい方法かもしれません。