使用 <img> 为 markdown gatsbyjs 创建自定义组件

Question

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

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

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

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

index.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"/>
     )
   }
 }

project-post.js

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

我收到了这个……

Answer 1

问题是道具作为字符串传递以重新炒作 - 当 Gatsby 处理和构建降价时，组件不会接收资产散列值。因此，一旦您构建了站点，prop 就与 image 标签的 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 中配置块中插件的一个选项，但这在紧要关头对我有用。

Answer 2

这真的很棘手，因为（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,
            }
          },
        ],
      },
    },

然后在你的markdown中使用它：

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