SveletKitダイナミックイメージのインポート:テンプレートに画像を追加する

✨ 導入
SvelteKitダイナミックイメージインポートによって意味するものを定義することから始めましょう.次に、私たちを助けるためにVITEのダイナミックなインポート機能を使用する方法を実行します.
我々が始める前に、我々はSveletkitサイトにイメージの定期的な追加について話していないと言及しなければなりません.たとえば、特定のページに対してsvelteコンポーネントを書く場合.会社のサイトで私達のページについて言いましょう.あなたがそのイメージがページに含まれている正確にコンポーネントを書くとき、あなたが知っているならばadding responsive, Next-Gen images in SvelteKit using vite-imagetools.
ここでは、ページがテンプレートでレンダリングされる場合があります.そのテンプレートはいくつかのページをレンダリングするのに責任があるかもしれません、そして、それらのページの各々はよくブラウザで異なったイメージを持っているかもしれません.これはすべて同じテンプレートから来てもそうです.例はオンラインストアかもしれません.あなたは、製品ページのテンプレートを持つことができました.個々の製品ページは、同じ寺院によって作成することができますが、おそらくそれが参照している実際の製品のイメージが含まれます.これはまさに私たちがここを見ているケースです.今、あなたはこれが何であるかについてわかっています.

🖋 使用例
ここではブログサイトを見ていきます.私たちのテンプレートは、私たちのサイト上の任意のブログ記事をレンダリングすることができます.しかし、ユーザーエクスペリエンスを向上させるためにace Search Engine Optimisation , 私たちは、各ブログ記事に別の機能画像を追加することを決定.また、プレースホルダが累積レイアウトシフトを減らすために、応答画像を使用したい.最後に、我々はキャッシュして、検索エンジン最適化(SEO)メタデータで使われるイメージのために、関連を持ちたいです.ニーズをまとめましょう

次世代の形式で応答画像placeholders to reduce Cumulative Layout Shift ,

我々は、各ページで使用するイメージを指定する方法がありますが、任意の画像をレンダリングすることができるテンプレートを必要とする

応答画像データを生成する際に重い持ち上げを行うためにVITE imagetoolsを使用します.

次に解決策をやろうとしましょう.

🧑🏽‍🎓 SveletKitダイナミックイメージインポート問題
VITEイメージツールを使用すると、プロジェクト内で既に保存されている資産をインポートするだけで、ソースURLを生成できます.例として、SveletKitコードは次のようになります.

import featuredImageSrc from '$lib/assets/about/company-headquarters.jpg';

例えば、私たちのブログユースケースに戻っても、イメージを動的に指定する方法が必要です.SveletKitでダイナミックインポートが可能であることを既に知っているかもしれません.この機能はVITEによって提供されます.以下に例を示します:

const modules = import.meta.glob('./dir/*.js')
const data = await import(`../lib/assets/blog/${office}/index.json`);

番目の例をテンプレートファイルに含めることができますoffice インポートで.
これらの作業は一般的なケースでは、私は問題を使用して画像をインポートしていたvite-imagetools 動的変数を使用します(静的パスを使用しても問題はありません).以下に動的変数の例を示します:

// WOULD NOT WORK
const src = await import(`../lib/assets/blog/${slug}/${featuredImage}.jpg`;

興味深いことに、以下のようにうまく動作しました.

imageData = await import(`../lib/assets/blog/data/${slug}.js`;

🧑🏽‍🎓 SveletKitダイナミックイメージインポートソリューション
私は、SveletKitダイナミックなイメージ輸入問題への潜在的解決を嗅ぐことができます!私たちは、それぞれのブログ・ポストのためにこれらのファイルのうちの1つを作成することができて、ファイルの中で通常通りイメージデータを生成することができます.たとえばこのようなものをデータファイルに追加します.

import meta from '$lib/assets/blog/post-one/featured-image.jpg';

const { src, width } = meta;

const data = {
  src,
  width
}

export { data as default };

ここでの欠点は、各ブログ記事にこれらのファイルを書く必要があることです.それは手動で行うにはかなり危険かもしれません.しかし、これらのファイルを生成するスクリプトを作成することができます.上に我々のスクリプトで生成されたSEO画像だけでなく、低解像度の画像プレースホルダーのような余分なデータを含めることができます.スクリプトは、すべてのビルドの前に実行できますが、実際には新しいブログ記事を追加するか、ブログイメージを変更するだけで変更する必要があります.
以下のようなスクリプトを使用して生成されたブログ投稿イメージデータファイルの例です.

import meta from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out.jpg?width=672&metadata';
import srcsetwebp from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out.jpg?w=1344;672&webp&srcset';
import srcsetauto from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out.jpg?w=1344;672&jpeg&srcset';
import ogImage from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out-open-graph.jpg';
import ogSquareImage from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out-open-graph-square.jpg';
import twitterImage from '$lib/assets/blog/best-medium-format-camera-for-starting-out/best-medium-format-camera-for-starting-out-twitter.jpg';

const { height, src, width } = meta;

const data = {
  slug: 'best-medium-format-camera-for-starting-out',
  alt: 'Photograph of a Hasselblad medium format camera with the focusing screen exposed',
  width,
  height,
  src,
  sources: [
    { srcset: srcsetwebp, type: 'image/webp' },
    { srcset: srcsetauto, type: 'image/jpeg' },
  ],
  dominantColour: '#484848',
  placeholder:
    'data:image/jpeg;base64,/9j/2wBDAAwREhMUFBUUFBofGhUaHiIcGhohKC4jJB4hMzg/PTouKC5CRFpMPi5XRTc3VmBRVlpgZmRkQklveXFmeFtlaWf/2wBDAQgMDQwNDw8PDxFgEBIaVmBaYFpgY2NjY2BjYGBiY2NjY2NjY2NjY2NjY2JjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwX/2gAMAwEAAhADEAAAAM+Cev8A/8QAHBABAAEEAwAAAAAAAAAAAAAAAQIAAxMhEZGh/9oACAEBAAE/AM5u2kZDIkS48rMmtnTX/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQIA/9oACAECAQE/AKtkkDf/xAAXEQEAAwAAAAAAAAAAAAAAAAABABEh/9oACAEDAQE/AHKZ/9k=',
  ogImage,
  ogSquareImage,
  twitterImage,
};

export { data as default };

スクリプトを使用して、我々がWebPの代わりにAvifイメージを使用するか、我々のイメージ幅を変えたいと思うならば、それはデータファイルを再生するのが非常に簡単です.同様に我々は低解像度の代わりにプレーン、支配的な色プレースホルダーのために行く場合.あなたはfull working example in the SvelteKit Blog MDsveX starter on the Rodney Lab GitHub page .

🙏🏽 フィードバック
そのポストは役に立ちましたか.この問題を解決する方法はありますか.私はあなたのソリューションを教えてください.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはTwitterやaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿SvelteKit だけでなく、他のトピック.Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.