reactjs 如何使Next.js图像组件获取更小的图像？

xmjla07d 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(98)

import Image from 'next/image'
import ImageTeam from '../public/images/team.jpeg'

<Image
  src={ImageTeam}
  width={720}
  height={480}                
  sizes="720px"                                
/>

上面的代码获取的图像是这样的：
http://localhost:3000/_next/image?url=team.jpg&w=1920&q=75
该w=1920。我想使w=720。我该怎么做？我想保持静态导入的图像。

reactjs

来源：https://stackoverflow.com/questions/76052197/how-to-make-next-js-image-component-fetch-smaller-image

1条答案

按热度按时间

mwngjboj1#

您可以通过向next/image组件传递附加选项来自定义图像URL。具体来说，您可以将布局属性设置为“fixed”，并将所需的宽度和高度值作为对象传递给宽度属性。

import ImageTeam from '../public/images/team.jpeg'

<Image
  src={ImageTeam}
  layout="fixed"
  width={{ width: 720, height: 480 }}
  sizes="720px"                                
/>

这将生成一个像这样的图像URL：

http://localhost:3000/_next/image?url=%2Fimages%2Fteam.jpeg&w=720&q=75

注意，width和height选项是作为一个带有width和height属性的对象传递的。此外，将布局属性设置为“fixed”可以确保图像始终以指定的尺寸呈现，而不是根据其容器放大或缩小。

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 如何使Next.js图像组件获取更小的图像？

1条答案

相关问题

热门标签

最新问答