Question

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

我也意识到图像路径是由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

这确实很棘手，因为（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

问题是道具以字符串形式传递以进行重新宣传-当由盖茨比（Marksby）处理和构建减价时，组件不会收到资产哈希值。因此，构建网站后，道具与图片标签的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 3

另一种解决方案是通过gatsby-mdx使用MDX在降价中包含组件。

您可以使用自定义组件包装网站的根元素，以供MDX与降价一起使用：

将gatsby-plugin-mdx添加到gatsby-config.js的插件中

在gatsby-browser.js中：

import wrapRoot from "./wrap-root-element"

export const wrapRootElement = wrapRoot

在wrap-root-element.js中：

import React from "react"
import { MDXProvider } from "@mdx-js/react"
import GuideList from "./src/components/custom-component.js"

const components = {
  CustomComponent,
  ImageComponent,
}

export default ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

然后，这些组件将在提供商的减价中可用：

# Heading

Text explaining something...

<ImageComponent src={path} />

More markdown

<CustomComponent />

使用降级gatsbyjs的<img/>创建自定义组件

3 个答案: