标签: gatsby-image

我有一个使用 Gatsby （带有gatsby-plugin-image）的网站，我正在尝试重构为 Typescript。这是我第一次接触 ts

我有一个布局页面，它使用页面查询来提取 Mdx 数据，但是我缺少一些类型，并且想知道是否有人可以为我指出正确的方向。

我正在努力寻找应该导入和使用的类型：

childImageSharp: {fixed:???}
MdxQuery = {body: ???}`

在处理图像的旧gatsby-image方法中，它使用 的类型，FixedObject但这不再有效。

对于这些缺失的类型，有人能为我指出正确的方向吗？

type Frontmatter = {
  title: string;
  titlestrap: string | null;
  category: string;
  slug: string;
  metaDescription: string | null;
  author?: string | null;
  featuredImage: {
    childImageSharp: {
      fixed: any; // what here?
      gatsbyImageData: IGatsbyImageData;
    };
  };
};

type MdxQuery = {
  id: string;
  body: any; // what here?
  frontmatter: Frontmatter;
  excerpt: string;
};

我正在将 Strapi 与 Gatsby 一起使用，并且在动态区域内渲染图像有困难。我在用：

• 斯特拉皮 3.6.2
• 盖茨比 3.5.1
• gatsby-source-strapi 1.0.0
• 盖茨比插件图像 1.5.0
• gatsby-plugin-sharp 3.5.0
• 盖茨比变压器夏普 3.5.0

直接在集合类型中找到的顶级图像字段可以使用 GraphQL 轻松查询以返回gatsbyImageData，以缩略图字段为例：

query MyQuery {
  allStrapiPage {
    nodes {
      Title
      Body
      thumbnail {
        localFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
}

但是，在上面的查询中Body是一个动态区域字段，其中包含数十个可选组件，其中许多包含图像字段。为 Body 返回的数据是标准 JSON 数据，这意味着图像字段没有 required gatsbyImageData，请参阅示例响应：

    "Body": [
    {
        "PrimaryImage": {
            "id": 12,
            "name": "Test Image",
            "alternativeText": "",
            "caption": "",
            "width": 338,
            "height": 260,
            "formats": {
                "thumbnail": {
                    "name": "thumbnail_Test Image",
                    "hash": …

我正在使用 Netlify CMS（并托管在 Netlify 上）开发 Gatsby 应用程序。尝试使元数据正常工作，以便 Twitter 卡片与图像一起正确显示。

元数据通常没问题，但图像没有显示在 Twitter 验证器上，或者如果我尝试发布到 Twitter。问题显然是图像本身，这些图像托管在网站上，使用 Gatsby 和 Gatsby Image Sharp 进行渲染。

事实上，验证器似乎没有显示出根本问题。简单地说，图像不显示：

相关元数据示例：

<meta name="twitter:url" content="https://example.com/" data-react-helmet="true">
<meta name="twitter:image" content="https://example.com/static/12345/c5b20/blah.jpg" data-react-helmet="true">
<meta data-react-helmet="true" name="twitter:title" content="Site title">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

我知道图像的问题，因为如果我用外部 URL 替换我的图像 URL（这是完整的图像 URL），它工作正常，显示带有图像的完整卡片。

知道是什么原因造成的吗？我正在缩小图像的大小，以便它可以快速加载，而且它似乎可以直接加载（例如）。（我的意思是，那张图片有什么奇怪的地方吗？）

注意：在此问题的先前版本中，我引用了 Cloudinary 和 Uploadcare，但此后在一个分支中删除了这两个以简化问题。（他们似乎已经从我使用的起始应用不必要的遗物。）现在，您可以看到一个示例页面该分支在这里和相关图像中的twitter:image标签在这里。我使用 React Helmet（和 Gatsby React Helmet）将此预处理/缩小的图像提供到标题中，并在我的 GraphQL 调用中使用以下代码以该特定的较小格式获取与博客文章关联的图像：

    featuredimage {
      childImageSharp {
        fixed(width: 480, quality: 75) {
          src
        }
    }

第二个注意事项/想法：我是否应该担心生产中的页面似乎在每次重新加载时都重新渲染？SSR …

我想优化我的 Gatsby 网站上的所有图像，并实现我已经安装了gatsby-image-plugin.

对于动态图像，我使用 GatsbyImage 组件，一切正常，没有任何问题。

问题是当我想使用StaticImage Component渲染静态图像时。

这是一个例子：

import laptop from '@images/laptop.png';

如果我导入图像并以这种方式使用它：

<img src={laptop} alt='laptop' />

图像在浏览器上正确显示，但如果我尝试这样做：

import { StaticImage } from 'gatsby-plugin-image';
<StaticImage src={laptop} alt='laptop' />;

图像未显示在浏览器上，我在控制台中收到以下消息：

图像未加载 /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png

终端中出现此错误：

在构建时找不到以下属性的值： src 图像未加载 /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png

我尝试作为src来自互联网的随机图像的链接传递，并且该图像显示在浏览器上！为什么当我使用资源文件夹中的图像时它不起作用？

附注；阅读插件文档我发现有一些限制，例如您不能传递来自 props 的图像，但事实并非如此！我直接从资产文件夹导入图像。

请问有什么线索吗？先感谢您。

我gatsby build在Gatsby 站点上运行时遇到问题，该问题仅在 Github Actions 容器中运行时发生。它也不总是发生。作为一个很好的例子，今天 Dependabot 启动了 12 个 PR，其中两个因此错误而失败。错误显示如下：

$ gatsby build
??????????????????????????????????????????????????????????????????????????
?                                                                        ?
?   Gatsby collects anonymous usage analytics                            ?
?   to help improve Gatsby for all users.                                ?
?                                                                        ?
?   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ?
?   To learn more, checkout https://gatsby.dev/telemetry                 ?
?                                                                        ?
??????????????????????????????????????????????????????????????????????????
success open and validate gatsby-configs - 0.035s
success load plugins - 0.892s
success onPreInit - 0.010s
success delete …

我的网站使用 Gatsby 和 NetlifyCMS，目前在GitHub Actions中运行工作流程时收到以下错误消息：

error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

Error: Input file contains unsupported image format

plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    `gatsby-plugin-smoothscroll`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-twitter`,
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        htmlFavicon: `src/images/favicon.png`,
      },
    },
    `gatsby-plugin-no-index`,
    `gatsby-plugin-transition-link`, …