Оптимизируйте все изображения в блогах с помощью плагина gatsby-image

Мне интересно, есть ли возможность включить плагин gatsby-image для всех изображений по умолчанию для сообщения в блоге, где у меня может быть более одного изображения.

Вот как в моем сообщении в блоге используются изображения:

  1. Рекомендуемое изображение, которое является частью frontmatter (и я могу управлять с помощью запроса GraphiQl)
  2. А все остальные изображения поста в блоге встроены с помощью плагина transformer- rebec.

Мне нужна помощь с №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

Frontmatter

---
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"
---

Заранее спасибо и удачного дня.

0 ответов

Другие вопросы по тегам