Tailwind Logo

XM Cloud のローカル環境での画像表示の調整

XM Cloud

公開日: 2024-09-06

XM Cloud のローカルの環境でプレビューを実行する際に、sxastarter の標準の設定では画像を利用しているコンポーネントでエラーが発生します。今回はこれを修正していきます。

課題の確認

Docker のコンテナでサイトのプレビューをすることが出来るように、以下のように Rendering host が設定されています。

Plain Text 
RENDERING_HOST=www.sxastarter.localhost

このサイトにアクセスをすると画像が正しく表示されません。

jssimagefix01.png

これの修正方法は Next.js の設定、およびコンポーネントの修正で対応できるため、今回はその手順を確認していきます。

プロモコンポーネントの画像

まず上記のエラー画面の下に表示されている赤い部分ですが、エラーは以下のような形で表示されています。

jssimagefix02.png

このエラーは、next/image コンポーネントが参照することが出来るドメインに対して制限がかかっており、Docker で起動している cm が有効になっていないためエラーが表示されるようになっています。この設定は、src\sxastarter\next.config.js の設定ファイルで、remotePatterns のパターンに対して cm の情報を追加することで回避できます。

JavaScript 
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'edge*.**',
        port: '',
      },
      {
        protocol: 'http',
        hostname: 'cm',
        port: '',
      },

上記の設定を追加して、コンテナを再起動してアクセスをすると画像が表示されます。

jssimagefix03.png

バナー画像の表示に関して

続いて画面の上に表示される画像が表示されていない状況を確認します。コードを参照すると以下のような形で画像を指定しているのがわかります。

jssimagefix04.png

画像をパスで指定しているのですが、cm は Docker で起動している名前であり、手元のブラウザからアクセスすることが出来ません。そこで、上記のプロモ画像のように、画像のパスを next/image を利用して表示するように変更をします。

画像を表示するコンポーネントは、Banner 関数で値を返しており、以下のようなコードとなっています。

TypeScript 
  return (
    <div
      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
      id={id ? id : undefined}
    >
      <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
        {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
      </div>
    </div>
  );

画像の URL は backgroundStyle に対して設定するように記述されています。どういう値が返ってきているのか、確認をすると以下のようになっています。

TypeScript 
  console.log(props.fields.Image.value.src);

結果は以下のようになります。

Plain Text 
http://cm/-/media/Feature/JSS-Experience-Accelerator/Basic-Site/banner-image.jpg?h=2001&iar=0&w=3000&hash=84052E2380D35D4CC401BB468280AFAF

そこで、http://cm/ で始まる場合のみ、相対パスとして表示するようにコンポーネントを書き換えます。変更後のコードは以下の通りです。

TypeScript 
  // background image on cm
  const imageUrl = props?.fields?.Image?.value?.src;
  const formattedUrl = imageUrl?.startsWith('http://cm/')
    ? imageUrl.replace('http://cm/', '/')
    : imageUrl;

  const backgroundStyle = (props?.fields?.Image?.value?.src && {
    backgroundImage: `url('${formattedUrl}')`,
  }) as CSSProperties;

結果、背景画像が表示されるようになりました。

jssimagefix05.png

まとめ

今回は画像コンポーネントの出力結果に関して、Vercel などでは問題なく動作するのですが、ローカルの Docker の環境で表示エラーになる部分に関して修正をしました。今回の設定は Docker の環境のみで有効となるコードとしているため、Vercel に展開しているサイトに関して影響はありません。

関連タグ