5

I am working on improving my image sizes and noticed that gatsby image was deprecated so I decided to try on the gatsby-plugin-image. On static images like this:

<StaticImage
 src="../images/image.png"
 alt="software design"
 layout={'fullWidth'}
 formats={['auto', 'webp']}
/>

is working fine. But when working on the images from netlify cms I get that following error Missing image prop even I have following:

<GatsbyImage
  image={refImage}
  alt={refImage}
  layout={'fullWidth'}
  formats={['auto', 'webp']}
/>

The whole file is as follows.

import React from 'react'
import PropTypes from 'prop-types'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

import * as S from './styled'
import './postitem.css'

const ReferenceItem = ({
    slug,
    background,
    category,
    date,
    title,
    description,
    image,
    timeToRead,
}) => {
    const refImage = getImage(image)
    return (
        <S.BlogColumn>
            <article className="post" key={slug}>
                <S.BlogColumn>
                    {image && (
                        <GatsbyImage
                            image={refImage}
                            alt={refImage}
                            layout={'fullWidth'}
                            formats={['auto', 'webp']}
                        />
                        /*                         <img
                                style={{
                                    display: 'block',
                                    width: '100%',
                                    height: 'auto',
                                }}
                                src={`/${image}`}
                                alt={image}
                            /> */
                    )}
                    {!image && (
                        <img
                            style={{
                                display: 'block',
                                width: '100%',
                                height: 'auto',
                            }}
                            src={require('../../../static/assets/img/cover.webp')}
                            alt="cover"
                        />
                    )}
                </S.BlogColumn>
                <S.BlogColumn>
                    <div className="post-content">
                        <h2 className="post-title">{title}</h2>
                        <p className="post-item-description">{description}</p>
                        <span className="post-date">
                            {date}&nbsp;&nbsp;—&nbsp;
                        </span>
                        <span className="post-words">
                            {timeToRead} minute read
                        </span>
                    </div>
                </S.BlogColumn>
            </article>
        </S.BlogColumn>
    )
}

ReferenceItem.propTypes = {
    slug: PropTypes.string.isRequired,
    background: PropTypes.string,
    category: PropTypes.string,
    date: PropTypes.string.isRequired,
    timeToRead: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    description: PropTypes.string,
}

export default ReferenceItem
Jukka Koivu
  • 269
  • 4
  • 15
  • Well, this should be the problem: `const imgName = image ? image.split('/')[3] : false`, more specifically the `[3]` part. Get the last element in the array, don't hard code an index(which I guess should be 4 in your specific case anyway). – zhulien Jan 25 '21 at 13:11
  • @zhulien I tried removing that `[3]` and it gives me following error `Cannot read property 'fluid' of null` – Jukka Koivu Jan 25 '21 at 13:19
  • I am trying to add child image sharp to the image. – Jukka Koivu Feb 24 '21 at 12:12

3 Answers3

0

The image needs to be of type GatsbyImageData as processed by gatsby-plugin-sharp or another source plugin that generates the correct format.

Additionally, the props you're passing to GatsbyImage will not work. StaticImage takes props, GatsbyImage needs that information to be passed to the sharp query that generates the images. For example,

{
   image {
     childImageSharp {
         gatsbyImageData(layout: FULL_WIDTH)
     }
   }
}
LB_19
  • 31
  • 3
  • What I understood from the documentation is that static one doesnt take props on the src but dynamic one does – Jukka Koivu Mar 01 '21 at 08:28
  • It's the opposite. The StaticImage component takes props and GatsbyImage does not, opting to pass those options to the resolver itself. If you can point to where in the docs you found this confusing I'd love to change it. – LB_19 Mar 01 '21 at 15:29
  • I just can't get that to work with allmarkdown remark – Jukka Koivu Mar 12 '21 at 07:03
0

They both can take props but Static Image can't get passed props from another component. No passing down to static image. The documentation for the plugin lists which props are for both, and which aren't.

The one that can take the passing down props is Dynamic one, GatsbyImage.

JPB
  • 21
  • 3
0

It seems that problem was react native version 0.65 where the `headerTransparent: true makes the button not work properly in android device. And is fixed in the next version.

Jukka Koivu
  • 269
  • 4
  • 15