From f3710984c2f81e66496013c97eb282883a54fbc1 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Sun, 3 Sep 2023 00:07:08 +0900 Subject: [PATCH 1/4] 1d8d51dca8ebd9df74ca627280aaba020d4474ce --- src/content/docs/ja/guides/images.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 4b625555f7bf4..79d4a5646bfa3 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -701,3 +701,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`の両方を組み合わせることが、シームレスに画像を扱うための正しい方法かもしれません。 From 9bd4f5d5a3becc1fcec49d59bc314a2d8f460f03 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Sun, 3 Sep 2023 00:09:23 +0900 Subject: [PATCH 2/4] a4b7585d27e75cd0e5e351e0fe34ab1dadf4c407 --- src/content/docs/ja/guides/images.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 79d4a5646bfa3..6a2eead5f8a6d 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -515,6 +515,13 @@ 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)があります。 From 740c9edd12224e444681f3695ffab1c680620d63 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Sun, 3 Sep 2023 22:14:50 +0900 Subject: [PATCH 3/4] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Kyosuke Nakamura --- src/content/docs/ja/guides/images.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 6a2eead5f8a6d..f4e860494698e 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -521,6 +521,7 @@ export default defineConfig({ ```bash pnpm install sharp ``` +::: ## コミュニティインテグレーション From cb3d412ea69fe53f3540f161b97d70515aa4485a Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Sun, 3 Sep 2023 22:22:21 +0900 Subject: [PATCH 4/4] Update src/content/docs/ja/guides/images.mdx Co-authored-by: ryu <114303361+ryuapp@users.noreply.github.com> --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index f4e860494698e..10acd0602ad4f 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -712,7 +712,7 @@ Astro v2.xで画像インテグレーションを使用していた場合は、 ### Astro v3.0での画像インポートの扱い -Astro v3.0で、画像をインポートした際の以前の挙動を維持しなければならず、画像URLの文字列が必要な場合は、以下のように画像パスの末尾に`?url`を追加してください。 +Astro v3.0で、以前の画像をインポートした際の挙動を維持しなければならず、画像URLの文字列が必要な場合は、以下のように画像パスの末尾に`?url`を追加してください。 ```astro title="src/pages/blog/MyImages.astro" ---