1

我想知道是否有可能默认为博客文章启用所有图片的gatsby-image插件，我可能有超过 1 张图片。

这是我的博客文章使用图像的方式：

  1. 一张特色图片，它是 frontmatter 的一部分（我可以通过 GraphiQl 查询进行管理）
  2. 并且博客文章的所有其他图像都使用transformer-remark-plugin内联

我需要关于 #2 的帮助，以便为博客文章的所有图像启用 gatsby-image 插件。

博文模板

import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/Layout"
import SEO from "../components/SEO"

const Template = ({ data, pageContext }) => {
  const { next, prev } = pageContext
  const { markdownRemark } = data
  const title = markdownRemark.frontmatter.title
  const desc = markdownRemark.frontmatter.description || markdownRemark.frontmatter.excerpt
  const image = markdownRemark.frontmatter.image
  const html = markdownRemark.html
  console.log('image::: ',image)

  return (
    <Layout>
      <SEO
        title={title}
        description={desc}
        image={image}
      />
      <h1 className="post-title">{title}</h1>
      <Img fluid={data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
      <div className="post" dangerouslySetInnerHTML={{ __html: html }} />

      {next && <Link to={next.frontmatter.path}>Next</Link>}
      {prev && <Link to={prev.frontmatter.path}>Prev</Link>}
    </Layout>
  )
}

export const query = graphql`
  query($pathSlug: String!) {
    markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
      html
      frontmatter {
        title
        excerpt
        description
        image
      }
    }
  }
`

export default Template

前线

---
title: "Celebrity Trends Which Inspired High Street Fashion"
date: "2020-31-05"
path: "fashion/celebrity-trends-which-inspired-high-street-fashion"
image: "/img/posts/1024x768.png"
categories:
  - "Fashion"
description: "Description for Celebrity Trends Which Inspired High Street Fashion"
tags:
  - "celebrity"
  - "hollywood"
---
4

0 回答 0