-1

My current image component maps through all the images in my folder and displays them, but I want to filter out two of my images so I can apply them to another page instead of displaying on the current page with all the other images in my folder.

How would I write my filter to remove the 2 images from showing up?

I have one image called background.jpg and background-2.jpg that I want to filter out

  const data = useStaticQuery(graphql`
query {
  allFile(filter: { extension: { regex: "/(jpg)|(png)|(jpeg)/" },

 // So this line filters out background.jpg, but I can't seem to 
 filter out both background.jpg and background-2.jpg?

  base: {ne: "background.jpg"}
  }) {
    edges {
      node {
        base
        childImageSharp {
          fluid(maxHeight: 600, maxWidth: 600) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
`)
designxd10
  • 57
  • 8
  • Does this answer your question? [How Can I return a specific image in Gatsby for my reusable component?](https://stackoverflow.com/questions/63912058/how-can-i-return-a-specific-image-in-gatsby-for-my-reusable-component) – Ferran Buireu Sep 16 '20 at 21:50
  • no, I ended up using base: {ne: "background.jpg"} and that filtered it out, but I can't seem to get it to work for both background and background-2 – designxd10 Sep 16 '20 at 21:52
  • I've already seen those answers and they don't relate to my question because I'm already mapping through my images folder and displaying the images. I need to know how to filter the base filter name "background.jpg" and "background-2.jpg" from not showing up in my page – designxd10 Sep 16 '20 at 21:58

1 Answers1

0

You can filter the node name with nin (even another regex) or ne rule.

const data = useStaticQuery(graphql`
  query {
    allFile(filter: { 
    extension: { regex: "/(jpg)|(png)|(jpeg)/" } }
    name: {ne: "background"})
     {
      edges {
        node {
          base
          childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`)

The query above should do the trick. If not, you can always use nin rule to create an array of exceptions or use another regex to exclude the background name.

More information: https://www.gatsbyjs.com/docs/graphql-reference/#filter

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • it still only filters out background.jpg, but background-2.jpg is still showing up. Is that a naming issue? or how would you filter multiple images based off name? – designxd10 Sep 16 '20 at 22:05
  • I tried putting it in an array `"message": "Expected type String, found [\"background\", \"background2\"]."` but still got this error – designxd10 Sep 16 '20 at 22:08