Создание пользовательского компонента с <img>для уценки gatsbyjs - PullRequest
Новая
       27

Создание пользовательского компонента с <img>для уценки gatsbyjs

0 голосов
/ 04 февраля 2019

Я пытаюсь создать пользовательский компонент для моей уценки, который принимает источник изображения.Я не могу отобразить изображение через пользовательский компонент, потому что изображение не найдено, потому что оно не существует

Я также понял, что путь к изображению генерируется GatsbyJS, и я не знаю, как получить путь кизображение в уценке.

У меня есть пользовательский компонент, который содержит некоторый текст, но я не могу сделать то же самое для изображений.

Вот простая уценка с заголовком и несколькими словами.

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

И я получил это ...

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Проблема заключается в том, что реквизиты передаются в виде строк для переформатирования - компонент не получает хеш-значение актива, когда уценка обрабатывается и создается Gatsby.Итак, реквизит не совпадает с src тега изображения после создания сайта, и он не находит хеш-файл ресурса.

Этот плагин, Примечание Гэтсби Копировать связанные файлы ,перемещает указанные вами файлы активов в папку public и передает правильно хешированный путь ресурса, но по умолчанию только для тегов img, a, audio и video (не для пользовательских компонентов).

Чтобы решить эту проблему, переместите плагин из node_modules в папку / plugin в корне проекта и добавьте нужные пользовательские компоненты и свойства в этой строке .В вашем случае это выглядит так: 

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

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

Очевидно, что это лучше использовать в качестве опции для плагина в блоке конфигурации в gatsby-config, но это сработало для меня в крайнем случае.

0 голосов
/ 05 февраля 2019

Это действительно сложно, так как (AFAIK) вы не можете передавать реквизиты из компонента страницы в пользовательский компонент с помощью rehype-react.Я думаю, вам нужно сделать что-то похожее на gatsby-remark-images, который находит пути к изображениям и устанавливает их.

Я написал этот плагин , который имитирует 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 }
...