1

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?

opanopono
  • 15
  • 1
  • 6

1 Answers1

1

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:

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • The `img` tag still doesn't read the first two images, i don't know why. Can `GatsbyImage` be used with that array? I would like to use the gatsby plugin because I have used it all over the site – opanopono Apr 02 '21 at 07:54
  • 1
    Yes, you can, but as I said, you will need to download the images and set locally the filesystem. Afterwards, you will need to query the images (with the `childImageSharp` node, as you did in the rest of the project) and provide to the `GatsbyImage` component the needed data. About the `img` tag, as I said, check the relativity of the paths and make some trials, this was just an idea, not the final solution because I don't know your project's structure. – Ferran Buireu Apr 02 '21 at 07:57
  • 1
    thank you!! I had the problem that some images were not showing in the mobile dev options of chrome. I think that It really has to be an example of gatsby-source-filesystem in the gatsby-plugin-image page. It could save a lot of time for new people coming to gatsby – galo hernandez Nov 28 '21 at 00:02