Блог

Поэтому я возюсь с созданием блога markdown и по какой-то причине не могу заставить изображения работать.

Gatsby-config.js

 plugins: [  'gatsby-plugin-image',  'gatsby-plugin-sharp',  'gatsby-transformer-sharp',  {  resolve: 'gatsby-source-filesystem',  options: {  name: 'images',  path: `${__dirname}/src/images/`,  },  __key: 'images',  }, ]  

Изображения хранятся в src/images

blogpost.md

 --- title: New Provider image: ../images/new-provider.jpg imageMeta:  attribution:  attributionLink: featured: false ---  

Вот как я запрашиваю данные

 export const query = graphql`  query PostsByID($slug: String!) {  mdx(slug: { eq: $slug }) {  body  frontmatter {  title  authors  date  featured  image  tags  }  }  } `;  

И вот моя img стихия

 lt;Img alt={title} fluid={image} key={title} /gt;  // I tried this too lt;img alt={title} src={image} /gt;  

Когда страница загружается , я просто вижу свой текст alt, а в консоли я вижу http://localhost:8000/images/new-provider.jpg

Чтобы запросить изображение, вам нужны childImageSharp данные (извлеченные из «резких» и «трансформеров» Гэтсби, у вас установлены оба).

Если структура данных и пути заданы правильно, ваш запрос GraphQL должен выглядеть следующим образом:

 export const query = graphql`  query PostsByID($slug: String!) {  mdx(slug: { eq: $slug }) {  body  frontmatter {  title  authors  date  featured  image {  childImageSharp {  fluid(width: 125, height: 125) {  ...GatsbyImageSharpFluid  }  }  }  tags  }  }  } `;  

Там у вас есть соответствующие узлы и свойства, которые должны быть у изображения Гэтсби для визуализации вашего изображения. Тогда вы можете использовать:

 lt;Img alt={title} fluid={image.childImageSharp.fluid} key={title} /gt;  

Если ваш запрос GraphQL не может получить childImageSharp узел (протестируйте его на игровой площадке GraphiQL по адресу localhost:8000/___graphql ), проверьте относительность путей уценки.