CODEWITHSUNDEEP
arraysreactjsgatsbygatsby-imagegatsby-plugin
opanopono
opanopono

Reputation: 15

Problem using GatsbyImage of gatsby-plugin-image with array

In my function I have an array containing id, title and image:

const arrays = [
    { id: 1, title: 'First Title', image: 'images/photo1.jpg' },
    { id: 2, title: 'Second Title', image: 'images/photo2.jpg' },
    { id: 3, title: 'Third Title', image: 'https://placekitten.com/800/600' },
    { id: 4, title: 'Fourth Title', image: 'https://placekitten.com/800/600' },
 ]

Using the <img> tag I can only view the last two placeholder images from the web. But I would like to use gatsby-plugin-image. I have read the documentation and need to use the GatsbyImage tag, but when I use it the images are not seen.

        <ul className="text-center wrap">
            {arrays.map((array, image) => (
              <li key={project.id}>
                <a
                  className="mx-auto text-3xl lg:text-4xl wrap-txt transition-all duration-300 z-40"
                  onMouseEnter={() => setIsShown(array.id)}
                  onMouseLeave={() => setIsShown(0)}
                  href="/"
                >
                  {array.title}
                </a>
                {isShown === array.id && (
                  <div className="w-1/4 absolute bottom-10 ">
                    <GatsbyImage image={array.image} className="w-full z-40" alt="" />
                  </div>
                )}
              </li>
            ))}
          </ul>

Does anyone have any idea how I can proceed?

Upvotes: 1

Views: 3124

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

You can't use GatsbyImage component of unparsed and untransformed images. Gatsby needs to treat the images that you want to display using its resolvers and transformers. This process will create a GraphQL node with the needed data for all images set in Gatsby's filesystem, so, you need to store data locally in your project or, alternatively, you may want to use StaticImage, which accepts remote images, but doesn't accept dynamic data (like your array of objects).

When sourcing CMS data, it's the plugin that deals with this process and allows you to use outer images along with GatsbyImage component.

In your case, I would debug why you only see the last two images using img tag, it seems something related to the relativity of the paths. Maybe this works for you:

const arrays = [
    { id: 1, title: 'First Title', image: '../images/photo1.jpg' },
    { id: 2, title: 'Second Title', image: '../images/photo2.jpg' },
    { id: 3, title: 'Third Title', image: 'https://placekitten.com/800/600' },
    { id: 4, title: 'Fourth Title', image: 'https://placekitten.com/800/600' },
 ]

Alternatively, if you want to use GatsbyImage, you will need to download and store the images locally and set the gatsby-plugin-filesystem accordingly. Assuming you download and store the images locally in /src/images:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`,
  },
},

Gatsby will know where your images are stored and will create the proper GraphQL resolvers, allowing you to use childImageSharp. You can check for their availability at localhost:8000/___graphql. For example:

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <h2>{data.blogPost.title}</h2>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

Resources:

Upvotes: 1

Related Questions