盖茨比 - 为静态图像使用艺术指导

Question

是否可以在 Gatsby 中对静态图像使用 withArtDirection？

我想生成如下图标签。静态文件路径将进入 src 和 srcset 属性。

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

在official document里面有使用动态图片的例子withArtDirection，但是好像没有静态图片的例子

Answer 1

In the official document, there is an example of using withArtDirection for dynamic images, but there seems to be no examples for static images.

我没有，因为 withArtDirection 是一个与 gatsbyImageData 一起工作的辅助函数（GraphQL 与 Gatsby 一起为静态资产生成的节点）：

There are a number of utility functions to help you work with gatsbyImageData objects. We strongly recommend that you do not try to access the internals of these objects directly, as the format could change.

由于您没有gatsbyImageData因为资产没有在本地分析，所以您不能使用它。

这同样适用于其他辅助函数，例如getSrc, getImage or getSrcSet。

可以使用类似的方法根据视口宽度加载一张或另一张图片，或使用 CSS 显示一张或另一张图片，类似于 withArtDirection 所做的。

盖茨比 - 为静态图像使用艺术指导

Gatsby - use art direction for static images

gatsby