Question

包含我的图像的Markdown页面已被gatsby-remark-copy-linked-files正确使用和链接，但是我需要使用图像的URL构建一个JSON feed。因此，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属性中找到。

这是一个用于获取htmlAst的graphql查询：

{
  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)
}

如何查找使用gatsby-remark-copy-linked-files导入的图像的路径？

2 个答案: