изображение Гэтсби svg не найдено - PullRequest
Новая
       22

изображение Гэтсби svg не найдено

0 голосов
/ 05 декабря 2018

При попытке загрузить изображение в формате SVG следующим образом: 

export const query = graphql`
    query {
        fileName: file(relativePath: { eq: "logo_large.svg" }) {
            childImageSharp {
                fluid(maxWidth: 1060) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
            }
        }
    }
`

Я получаю TypeError: Cannot read property 'childImageSharp' of null

Если я попробую то же самое, но с изображением .jpg или .png, оноработает, поэтому относительный путь должен быть правильным.Есть ли что-то, что я должен особо рассмотреть с SVG?

Ответы [ 2 ]

0 голосов
/ 11 мая 2019

"SVG не поддерживается этим плагином по понятным причинам, они являются векторными и автоматически корректируют свой размер без использования такого плагина, как этот"

Правильно.У меня было это требование для поля, которое может быть всех трех или даже более типов, таких как png + jpg + svg, поэтому вы должны динамически обрабатывать его с помощью gatsby-image или нет.Вы решаете эту проблему, добавляя extension и publicURL в свой запрос: 

  ...
  image {
    childImageSharp {
      fluid(maxWidth: 500, quality: 92) {
        ...GatsbyImageSharpFluid
      }
    }
    extension
    publicURL
  }
  ...

А затем в PreviewCompatibleImage добавляете что-то вроде: 

  // svg support
  if (!childImageSharp && extension === 'svg') {
    return <img style={imageStyle} src={publicURL} alt={alt} />
  }

Кредит идет в andresmrm на github: https://github.com/gatsbyjs/gatsby/issues/10297#issuecomment-464834529

0 голосов
/ 14 декабря 2018

SVG не поддерживаются этим плагином по понятным причинам, они являются векторными и автоматически корректируют свой размер без использования такого плагина, как этот

...