Создание пользовательского компонента с <img> для уценки gatsbyjs
Я пытаюсь создать собственный компонент для моей уценки, который принимает источник изображения. Я не могу отобразить изображение через пользовательский компонент, потому что изображение не найдено, потому что оно не существует.
Я также понял, что путь к изображению генерируется GatsbyJS, и я понятия не имею, как получить путь к изображению в уценке.
У меня есть пользовательский компонент, который содержит некоторый текст, но я не могу сделать то же самое для изображений.
Вот простая уценка с заголовком и несколькими словами.
index.md
---
title: ToDoApp
---
Hi this is my todoapp app. Below is a bunch of screens
<imageholder src='./screen1.png'></imageholder>
 <!-- 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
И я получил это...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это действительно сложно, поскольку (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 }
@Harrizontal Я рад, что вы нашли это полезным! Он не принимает несколько источников изображений, но добавить их может быть несложно. Каков ваш вариант использования и какой синтаксис, по вашему мнению, будет выглядеть?
Я пытаюсь создать какую-то сетку для изображений - к различному количеству изображений применяется разный стиль сетки - поэтому я считаю, что пользовательский компонент для уценки работает для этого варианта использования. Я также хотел бы поместить некоторый текст рядом с изображением... Я не подходил к встроенным стилям, например, div class='row',etc - как вид начальной загрузки, потому что это может повлиять на читаемость в уценке (вероятно, я мог бы будьте слишком строги в этом...). Я не мог придумать хороший синтаксис, но это может работать правильно..? <image-wrapper src='./hero.jpg' src2='./hero2.jpg'></image-wrapper>
Извините за длинный текст. Я новичок в React и новичок в Гэтсби. Желание может внести свой вклад в ваш проект в ближайшем будущем ...
Попался, я посмотрю, чтобы добавить что-то подобное. Вы также можете проверить мдкс, который позволяет вам писать jsx в md — я действительно не использовал его, но он может быть полезен для того, что вы хотите сделать!
Проблема в том, что реквизиты передаются в виде строк для рехайпа — компонент не получает хэш-значение актива, когда уценка обрабатывается и создается Гэтсби. Таким образом, реквизит не совпадает с src тега изображения после создания сайта, и он не находит хэш-файл актива.
Этот подключаемый модуль, Gatsby Remark Копировать связанные файлы, перемещает файлы ресурсов, на которые вы ссылаетесь, в папку public и передает правильно хешированный путь к ресурсам, но по умолчанию только для тегов img, a, аудио и видео (не для пользовательских компонентов).
Чтобы решить эту проблему, переместите плагин из node_modules в папку /plugin в корне проекта и добавьте нужные пользовательские компоненты и свойства в эта линия. В вашем случае это выглядит так:
// Handle a tags.
extractUrlAttributeAndElement($(`a[href]`), `href`).forEach(processUrl)
// Manually added custom tags
extractUrlAttributeAndElement($(`imageholder[src]`), `src`).forEach(processUrl)
Очевидно, это было бы лучше использовать в качестве опции для плагина в блоке конфигурации в gatsby-config, но это сработало для меня в крайнем случае.
Спасибо, Дерек! Вам было интересно, принимает ли ваш плагин несколько источников изображений? Шикарный плагин кстати