Блог

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

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

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

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

Затем в gatsby он дает мне это:

 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, который gatsby fluid искажает и не отображает его полное изображение. Исходное изображение также получило этот CSS:

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

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

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

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

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

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

ОБНОВИТЬ Вы также можете изменить стили для gatsby-image со следующими реквизитами:

• стиль: распространение на стили элемента-оболочки по умолчанию
• 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>