Гэтсби добавляет gatsby-image-wrapper к моему изображению

Я использую gatsby в своем проекте, используя strapi.js через компонент Image. Я пытаюсь использовать жидкую версию, но у меня есть проблемы.

Вместо простого изображения, похожего на мой дизайн HTML и CSS, он добавляет эту странную gatsby-image-wrapper оболочку div, которая разрушает мое позиционирование изображения.

Например, я использую этот код только в своем проекте gatsby:

           <div className="rover_img">
                         <Image fluid={photo.childImageSharp.fluid} alt={name}  />
                      </div>

Затем на Гэтсби он дает мне это:

div class="gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 102.5%;"></div><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAVABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAQBAgMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAeNcFgruycfArC5Aj//EABsQAAICAwEAAAAAAAAAAAAAAAECABIDESEi/9oACAEBAAEFAt9AFZbTBuwMQczeLNP/xAAZEQABBQAAAAAAAAAAAAAAAAAQAQIREjH/2gAIAQMBAT8BbFQmD//EABYRAAMAAAAAAAAAAAAAAAAAAAEgMf/aAAgBAgEBPwE1P//EABwQAAEDBQAAAAAAAAAAAAAAAAABEUECECAhMf/aAAgBAQAGPwJsHizlKJOzqn//xAAdEAADAQABBQAAAAAAAAAAAAAAAREhMUFRYXGB/9oACAEBAAE/IdIh7ohC+5aMwU6xvyY5FoJXCvp//9oADAMBAAIAAwAAABCw58H/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QEE6J/8QAFxEBAQEBAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxDUJ0n/xAAcEAEAAwACAwAAAAAAAAAAAAABABEhMVEQQXH/2gAIAQEAAT8Q0Cr1iMUDxoS6bM9SqUYcYwxBdque0qAl5LfkBo7oc//Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition-delay: 500ms;"><picture><source srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" sizes="(max-width: 211px) 100vw, 211px"><img sizes="(max-width: 211px) 100vw, 211px" srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" src="/static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg" alt="Chris Benson" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" sizes="(max-width: 211px) 100vw, 211px" /><img loading="lazy" sizes="(max-width: 211px) 100vw, 211px" srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" src="/static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg" alt="Chris Benson" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>

Обычный размер изображения - 211 x 217, что искажает жидкость Гэтсби и не отображает полное изображение. Исходное изображение также имеет этот CSS:

 width: inherit;
    position: absolute;
    -webkit-transform: translateY(-120px) translateX(-120px);
    -ms-transform: translateY(-120px) translateX(-120px);
    transform: translateY(-120px) translateX(-120px);

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

Есть ли способ исправить это? Если нет, есть ли способ просто добавить изображение из strapi api без использования обычного компонента изображения gatsby?

ОБНОВЛЕНИЕ: вот запрос:

const query = graphql`
  {
    allStrapiRovers {
      nodes {
        id
        title
        description
        photo {
          childImageSharp {
            fluid{
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

javascript strapi gatsby gatsby-image
person Marc Solva    schedule 14.10.2020    source источник
comment
Каков результат вашего запроса при получении fluid? Можете ли вы предоставить сам запрос?   -  person Ferran Buireu    schedule 14.10.2020
comment
Ферран добавил обновление для запроса выше.   -  person Marc Solva    schedule 14.10.2020

Ответы (1)


arrow_upward
3
arrow_downward

Похоже, вам лучше использовать фиксированные изображения?

ОБНОВЛЕНИЕ. Вы также можете изменить стили для изображения gatsby с помощью следующих параметров:

  • style: распространить на стили по умолчанию элемента оболочки
  • imgStyle: распространить на стили по умолчанию элемента изображения
  • placeholderStyle: распространить на стиль по умолчанию элемента изображения заполнителя

<Image imgStyle={{ position: "relative" }} style={{ height "211px", width: "211px" }} />

См. Обновленный запрос ниже:

const query = graphql`
  {
    allStrapiRovers {
      nodes {
        id
        title
        description
        photo {
          childImageSharp {
            fixed(width: 211){
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

...

<div className="rover_img">
  <Image fixed={photo.childImageSharp.fixed} alt={name}  />
</div>
person Alex Gill    schedule 14.10.2020
comment
ну, это исправление также не сработало, как ожидалось, он даже не показывает полный размер изображения, которое было обрезано: prnt.sc/ uz2qht вверху у него все еще есть gatsby-image-wrapper, который дает относительную позицию и отображение блока - person Marc Solva; 14.10.2020
comment
@MarcSolva, возможно, вам лучше переопределить некоторые из этих встроенных стилей в оболочке - я обновил ответ. - person Alex Gill; 14.10.2020
comment
не могли бы вы объяснить, как работает imgStyle или style? Для меня это немного расплывчато? Может быть, приведем несколько примеров и посмотрим, поможет ли это › - person Marc Solva; 14.10.2020
comment
@MarcSolva Я обновил ответ - это средство переопределить стили по умолчанию, которые добавлены встроенными. - person Alex Gill; 14.10.2020
comment
github.com/gatsbyjs/gatsby/issues/10486#issuecomment-447576091 - person Shiva; 26.03.2021