Сборка Gatsby всегда выбрасывает Входной файл отсутствует или имеет неподдерживаемый формат изображения

Question

Полное описание проблемы можно найти здесь https://github.com/gatsbyjs/gatsby/issues/5638

Короче говоря, я использую gatsby-plugin-remark и gatsby-transformer-remark для оптимизации изображений, помещенных в frontmatter файлов md.

Скажем, мой файл уценки имеет

---
title: Beautiful UI
featured_image: ../../images/project-vscbui.png
subtitle: A set of color themes for VSCode
order: 90
link: https://vscbui.rocks
templateKey: projects
---

...

И я запрашиваю его как

export const projectQuery = graphql`
  query ProjectQuery {
    projects: allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___order] }
      filter: { frontmatter: { templateKey: { eq: "projects" } } }
      limit: 1000
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            subtitle
            featured_image {
              childImageSharp {
                sizes(maxWidth: 960) {
                  ...GatsbyImageSharpSizes
                }
              }
            }
            link
          }
          html
        }
      }
    }
    site {
      siteMetadata {
        shortTitle
      }
    }
  }
`;

gatsby develop, работает отлично.Но когда я запускаю gatsby build, он не может выдавать ошибки

success Building static HTML for pages — 3.818 s
error Input file is missing or of an unsupported image format


  Error: Input file is missing or of an unsupported image format

error UNHANDLED REJECTION


  Error: Input file is missing or of an unsupported image format

Хотя сборка на самом деле работает просто отлично .

Для воспроизведения, пожалуйста, разветвите этот репозиторий https://github.com/swashata/swas.io и запустить yarn build.Журнал ошибок также можно найти здесь https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b10e5cdb3127429bf8a5d5d

Я испробовал все подходы для решения этого

1. Добавить featured_image к каждому frontmatter.
2. Удалить запрос featured_imagefrom graphql.
3. Удалите плагин gatsby-примечания-images.

Но, похоже, ничего не работает, кроме фактического удаления изображений и четкого плагина.

Любая помощь в поиске проблемы очень ценится.

Answer 1

Оказывается, у меня фактически отсутствовал файл изображения.

Я использую gatsby-plugin-manifest, и путь к изображению, который я здесь указал, это src / img / ninja.png, но это должно было быть src/images/ninja.png.Я изменил имя каталога раньше и совершенно забыл реорганизовать его для файла конфигурации.Я исправил, и он работает просто отлично.

Итак, суть в том, когда эта ошибка происходит

1. Найдите все файлы изображений.Особенно в файле gatsby-config.js.
2. Проверьте выходной каталог и посмотрите, действительно ли он содержит "острые" изображения.

Путь отладки, который я выбрал, состоял в том, чтобы отключить изображения по одномуодин в файлах уценки.Но так как это не решило проблему, я начал искать в другом месте, а затем gatsby-config.js обратил внимание.Совершенно моя вина.