2

我想在下一个 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}
      />

图像将来自 api,因此图像 src 每次都会改变。我不能在下一个 js 图像中使用链接,可以在下一个 js 图像中使用链接吗?

4

1 回答 1

3

Next Image 的工作类似于 htmlimg标签。对于动态用例,您应该将动态数据获取到页面。

要获取动态数据,您应该使用getServerSidePropsorgetStaticProps通过 url 传递动态属性: 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 回答