Javascript 使用<；创建自定义组件；img>；为了减价，盖茨比

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

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

我收到了这个

---

这真的很棘手，因为（AFAIK）您不能通过

重新键入react

将道具从页面组件传递到自定义组件。我认为你需要做一些类似于盖茨比评论图像的事情，它定位图像的路径并设置它们

我写的是模仿盖茨比评论图像，但是针对像您这样的定制组件

这是默认设置，您可以覆盖组件名称并传入其他图像转换选项

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

//src/components/ImageWrapper.js
从“React”导入React
//夏普图像变换的结果将直接传递给该组件。
//所以如果你用'fluid'作为'sharpMethod'，你会得到
//src，srcSet，base64，aspectRatio，srcSetType，大小，密度，原始图像。
//请参阅“盖茨比插件”文档。
常量ImageWrapper=（{src，srcSet}）=>
导出{ImageWrapper}

问题在于，道具作为字符串传递以重新键入-当盖茨比处理和构建降价时，组件不会收到资产哈希值。因此，构建站点后，prop与image标记的src不同，并且它找不到资产散列文件

此插件可将引用的资产文件移动到

公共

文件夹，并传递正确散列的资产路径，但默认情况下仅适用于img、a、audio和video标记（不适用于自定义组件）

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

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

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

---

显然，这将更好地作为

gatsby config

中配置块中插件的一个选项，但这在紧要关头对我起了作用。

谢谢你，德里克！想知道你的插件是否接受多个图像源？很棒的插件way@Harrizontal我很高兴你发现它很有用！它不接受多个图像源，但可能不难添加。您的用例是什么？您认为它会是什么样的语法？我正在尝试为图像创建某种网格-不同数量的图像应用不同的网格样式-因此，我相信用于标记的自定义组件确实适用于此用例。我也想把一些文字旁边的图像。。。我没有使用内联样式，例如div class='row'，等等，就像bootstrap类型一样，因为它可能会影响标记的可读性（可能我对这个太严格了…）。我想不出一个好的语法，但这可以正常工作。。？对不起，我的文字太长了。我是React的初学者，对盖茨比来说是个新手。希望能在不久的将来为您的项目做出贡献…明白了，我会考虑添加类似的内容。您可能还想签出它，它允许您在md中编写jsx——我还没有真正使用过它，但它可能会对您想要做的事情有所帮助！

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

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

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