StaticImage doesn't render image

[kalkv]

Hey,

when i use GatsbyImage and pull data from graphql everything is ok but encounter problem when trying to use StaticImage component with relative source path. I migrated from v2 so suspecting gatsby can't resolve file source gived in src prop.

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import StyledAdnotation from './Adnotation.styled';

const Adnotation = () => {

  return (
    <StyledAdnotation className="adnotation">
      <div className="adnotation__image-container">
        <StaticImage
          src="damian-kalka.jpg"
          layout="fullWidth"
          alt=""
        />
      </div>
{...}

Any ideas?

[rodneylab]

Hi Damian,
That's odd! Where is your source file? I think it should be in the same folder as the JSX file which has the StaticImage component, fot the src you have given. If it already is, try src="./damian-kalka.jpg" to see if that make a difference.

I had the following in my own code which worked fine (Gatsby v2 & v3), in case that helps:

         <StaticImage
            alt="Rodney Lab logo"
            src="../images/rodneylab-logo.png"
            width={16}
            height={16}
            tracedSVGOptions={{
              color: '#1c768f',
              background: '#ffffff',
            }}
          />

Let me know if it is still not working. Perhaps I can take a look at the code, if it is open sourced?

Rodney

[kalkv]

I realized that i forgot to type gatsby-pugin-image in config, so remember to do it. As a curiosity, dynamic GatsbyImage component works without it.