2

next js でダイナミックリンクを使いたいImage。次のJSが提案する

<Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />

しかし、私はのように使いたい

const imageDynamic = [Image][1]

<Image
        src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png" or {imageDynamic}
        alt="Picture of the author"
        width={500}
        height={500}
      />

image は api から取得されるため、image src は毎回変更されます。次の js Image でリンクを使用できません。次の js Image でリンクを使用することはできますか?

4

1 に答える 1

3

img次の画像は、htmlタグと同様に機能します。動的な使用例では、動的データをページにフェッチする必要があります。

を使用する必要がある動的データをフェッチするには、getServerSidePropsまたはgetStaticPropsURL 経由で動的プロップを渡す必要があります: https://nextjs.org/docs/basic-features/data-fetching

import Image from "next/image";

const WithDynamicImage = (image) => {

return (
    <Image src={imageDynamic}
      alt="Picture of the author"
      width={500}
      height={500}
    />
)

}

export async function getServerSideProps({
  params,
}) {
  const image = await getImages() // fetch your data;
  const imageDynamic = image[param.id] //pass the prop from the url

  return { props: { image : imageDynamic || null } };
}

export default WithDynamicImage;

データの取得はpages/フォルダーでのみ機能し、コンポーネントでは機能しません。コンポーネントに使用する場合は、ページ内のデータをフェッチし、小道具をコンポーネントに渡す必要があります。

于 2021-04-01T23:11:19.220 に答える