GatsbyImage在手机上加载低分辨率图像

Question

我正在想办法让GatsbyImage在移动设备上显示高分辨率图像。例如，比率为16:9的HQ图像通过CMS上传(在此上下文中为Primsic(，然后我的前端通过graphql将其加载到Gatsby中，并显示为全窗口大小的图片，objectFit设置为COVER。非常适用于台式机，但一旦我将视图更改为移动视图，因为它占用了视口的100%高度，而gatsby图像插件看起来只占用了视口宽度-渲染图像由于分辨率低于所需而像素化。。我试着在插件中使用所有可能的API来强制更高的分辨率。强制断点默认值也没有帮助。

知道能做什么吗？也许唯一可能的解决方案是将裁剪成所需视口比例的图像的两个变体直接上传到Prism中，并以这种方式加载合适的图像？我相信在这种情况下必须有一种很好的自动化方法。。

Answer 1

我相信必须有一个很好的自动化方法来解决这种情况。。

确实存在：它被称为withArtDirection。

默认情况下，Gatsby在不同的屏幕尺寸下显示不同的图像分辨率，但它也支持艺术指导，基本上在不同的屏幕尺寸上显示不同的图片

为此，可以使用withArtDirection函数。您需要GraphQL提供的所有(或要应用的断点数量(图像，并且应该能够为每个大小编写一个媒体查询。

第一个参数是默认图像。当没有媒体查询匹配时会显示此项，但它也用于设置布局、大小、占位符和大多数其他选项。然后传递一个"；艺术导向的图像"；其是具有媒体和图像值的对象。

import { GatsbyImage, getImage, withArtDirection } from "gatsby-plugin-image"
export function MyImage({ data }) {
const images = withArtDirection(getImage(data.largeImage), [
{
media: "(max-width: 1024px)",
image: getImage(data.smallImage),
},
])
return <GatsbyImage image={images} />
}

如果屏幕宽度小于1024px，则会显示smallImage。否则，它将显示largeImage。

完整示例可在以下位置找到：https://paulie.dev/posts/2021/04/gatsby-plugin-image-with-art-direction/