CODEWITHSUNDEEP
javascriptreactjscomponentsmarkdowngatsby
Harrizontal
Harrizontal

Reputation: 95

Creating custom component with <img> for markdown gatsbyjs

I'm trying to create a custom component for my markdown that accepts an image source. I am unable to display the image via the custom component because the image is not found because it doesn't exist

I also realised the image path is generated by GatsbyJS and I have no idea how to retrieve the path of the image in markdown.

I do have a custom component that holds some text but I couldn't do the same thing for images.

Here is a simple markdown with a title and a few words.

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

I've created a custom component named imageholder where it holds some logic (in a near future...) in displaying the image

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

And I received this...

Upvotes: 4

Views: 1252

Answers (2)

Adam
Adam

Reputation: 264

The issue is that props are passed as strings to rehype - the component doesn't receive the asset hashed value when the markdown is processed and built by Gatsby. So, the prop isn't the same as the image tag's src once you build the site, and it's not finding the asset hashed file.

This plugin, Gatsby Remark Copy Linked Files, moves your referenced asset files to a public folder, and passes the correctly hashed asset path, but by default only for img, a, audio, and video tags (not for custom components).

To solve for this, move the plugin from node_modules into a /plugin folder in the project root, and add the desired custom components and props at this line. In your case, it looks like it would be:

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

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

Obviously this would be better served as an option for the plugin in a configuration block in gatsby-config, but this worked for me in a pinch.

Upvotes: 2

Derek Nguyen
Derek Nguyen

Reputation: 11577

This is really tricky since (AFAIK) you can't pass props from page component to custom component with rehype-react. I think you'd need to do something similar to gatsby-remark-images, which locates the images' paths and set them.

I wrote this plugin that mimics gatsby-remark-images, but for custom components like in your case.

Here's the default setting, you can override the component name and pass in additional image transformation options.

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

Then use it in your markdown:

<image-wrapper src='./hero.jpg'></image-wrapper>

And get the image props in your custom component.

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

Upvotes: 5

Related Questions