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

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

Короче говоря, я использую gatsby-plugin-remark и gatsby-transformer-remark для оптимизации изображений, размещаемых в передней части файлов 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. Добавьте Feature_image в каждый фронтмэттер.
  2. Удалите запрос Feature_image из graphql.
  3. Удалите подключаемый модуль gatsby-comment-images.

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

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


gatsby
person Swashata Ghosh    schedule 01.06.2018    source источник

Ответы (3)


arrow_upward
7
arrow_downward

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

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

Итак, суть в том, что когда возникает эта ошибка

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

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

person Swashata Ghosh    schedule 01.06.2018
comment
Спасибо, что предоставили всю эту информацию! Мне очень помогли! - person thinklinux; 10.03.2020

arrow_upward
1
arrow_downward

Для меня у меня было правильное изображение, и эта проблема была решена с помощью:

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

источник: https://github.com/gatsbyjs/gatsby/issues/21515#issuecomment-588416624

person Elijah Lynn    schedule 24.05.2020

arrow_upward
-1
arrow_downward

Просто добавьте это в свой package.json

разрешение: {резкое: 0,24,0},

person Marvin    schedule 02.09.2020