使用markdown gatsbyjs创建自定义组件

Question

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

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

我有一个自定义组件，其中包含一些文本，但我不能对图像做同样的事情。

这是一个带标题和几个单词的简单降价。

index.面对

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

这非常棘手，因为（AFAIK）你不能使用rehype-react将页面组件中的道具传递给自定义组件。我认为你需要做类似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,
            }
          },
        ],
      },
    },

然后在降价中使用它：

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

并在自定义组件中获取图像道具。

//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 }

Answer 2

问题是道具作为字符串传递以重新输入 - 当Gatsby处理和构建降价时，组件不会收到资产哈希值。因此，一旦您构建网站，支柱就不会与图像标签的src相同，并且它找不到资产哈希文件。

此插件Gatsby Remark Copy Linked Files将您引用的资产文件移动到public文件夹，并传递正确的散列资源路径，但默认情况下仅用于img，a，音频和视频标记（不适用于自定义组件）。

要解决此问题，请将插件从node_modules移动到项目根目录中的/ plugin文件夹中，并在this line中添加所需的自定义组件和道具。在您的情况下，它看起来像是：

// Handle a tags.
extractUrlAttributeAndElement($(`a[href]`), `href`).forEach(processUrl)

// Manually added custom tags
extractUrlAttributeAndElement($(`imageholder[src]`), `src`).forEach(processUrl)

显然，这将更好地作为gatsby-config中配置块中插件的选项，但这对我来说很有用。