Как найти пути к изображениям, импортированным с помощью gatsby-notes-copy-related-files?

Question

Страницы уценки с моими изображениями используются и корректно связаны с gatsby-remark-copy-linked-files, но мне нужно создать канал JSON с URL-адресами к изображениям. Итак, мне нужно получить доступ к путям изображений после того, как gatsby-remark-copy-linked-files скопирует их в.

Как запросить запрос, чтобы найти пути к изображениям, которые gatsby-remark-copy-linked-files использует для создания тегов <img/>?

Answer 1

gatsby-remark-copy-linked-files копирует только файлы в папку public.Вы имеете в виду gatsby-remark-images?Последний автоматически помещает свои изображения в папку public/static.Вы не можете получить доступ к этим ссылкам на изображения.

Answer 2

Теги <img/> можно найти в свойстве htmlAst узла.

Вот запрос graphql для получения htmlAst:

{
  allMarkdownRemark() {
    edges {
      node {
        htmlAst
      }
    }
  }
} 

Эта функция спустится в html-дерево и найдет теги img:

const imagesFromAst = htmlAst => {
  const findImageTags = node => {
    if (node.children) {
      const myTags = node.children.filter(propEq("tagName", "img"))
      const childrensTags = node.children.map(findImageTags)

      return [...myTags, ...flatten(childrensTags)]
    } else {
      return []
    }
  }

  return findImageTags(htmlAst)
}