javascript - 使用 为 markdown gatsbyjs 创建自定义组件

Question

我正在尝试为我的 markdown 创建一个接受图像源的自定义组件。我无法通过自定义组件显示图像，因为找不到图像，因为它不存在

我也意识到图像路径是由 GatsbyJS 生成的，我不知道如何在 Markdown 中检索图像的路径。

我确实有一个包含一些文本的自定义组件，但我无法为图像做同样的事情。

这是一个带有标题和几个词的简单 Markdown 。

索引.md

---
title: ToDoApp
---

Hi this is my todoapp app. Below is a bunch of screens

<imageholder src='./screen1.png'></imageholder>
![Image from Gyazo](./screen1.png) <!-- it displays... -->

我创建了一个名为 imageholder 的自定义组件，它在显示图像时包含一些逻辑(在不久的将来......)

ImageHolder.js

import React from "react"
   export default class ImageHolder extends React.Component {
   render() {
     return (
       <img src={this.props.src} alt="Logo"/>
     )
   }
 }

项目-post.js

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
   "imageholder": ImageHolder
  },
}).Compiler 

我收到了这个...

Answer 1

这真的很棘手，因为(据我所知)您不能使用 rehype-react 将 props 从页面组件传递到自定义组件。我认为您需要执行类似于 gatsby-remark-images 的操作，它会定位图像的路径并进行设置。

我写了this plugin模仿 gatsby-remark-images，但用于自定义组件，如您的情况。

这里是默认设置，你可以覆盖组件名称并传入额外的图像转换选项。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-custom-image-component`,
            options: {
              // plugin options
              componentName: 'image-wrapper',
              imagePropName: 'src',
              sharpMethod: 'fluid',
              // fluid's arguments, see gatsby-plugin-sharp docs
              quality: 50,
              maxWidth: 800,
            }
          },
        ],
      },
    },

然后在你的 Markdown 中使用它:

<image-wrapper src='./hero.jpg'></image-wrapper>

并在您的自定义组件中获取图像 Prop 。

//src/components/ImageWrapper.js
import React from 'react'

// the result of sharp's image transformation will be passed directly to this component.
// so if you use `fluid` as `sharpMethod`, you'll get
// src, srcSet, base64, aspectRatio, srcSetType, sizes, density, originalImage. 
// Please refer to `gatsby-plugin-sharp` docs.
const ImageWrapper =  ({ src, srcSet }) => <img src={src} srcSet={srcSet} />

export { ImageWrapper }