Unable to load images from local library in GatsbyJS - reactjs

Question

I am unable to make my local images render in the development server of my gatsby website. I am using gatsby and tailwindcss. I am trying to combine a filterable photo gallery and a light box. My problem is that the file paths do not work unless I use the url through graphql. I think this also affecting my light box because if you click on an image it will not display it and also show image not found for the light box.
I have tried to configure the gatsby-source-filesystem file path to access my images folder in my src. I also matched the array source path to the /src/images/mbaglass1.jpeg. This rendered the alt tag.
I have tried to import the file path through the allFile in grapql. This is my first time using it. I was unable to render the images on the page in the manner I require.
I did import the url from graphql which is successfully rendering the images on the page, but I am unable to make it function with my light box.
I have created a functioning light box for a different website and I have been able to make this filter function in this website, but I could use some guidance towards successfully combining the two.
Here is the component:
import ImageLightbox from "react-image-lightbox"
import React from "react"
const images = [
{
id: 1,
src: "/src/images/mbaglass1.jpeg",
category: "Frameless Showers",
alt: "shower",
},
{
id: 3,
src: "/static/ddb59dd079ddf9b6b0caebc1a9f05078/mbaglass3.jpeg",
category: "Frameless Showers",
},
{
id: 2,
src: "/static/bbb4f3909b9421b16d474e1fa01805c4/mbaglass2.jpeg",
category: "Mirrors",
},
]
const categories = [
"All",
"Frameless Showers",
"Sliding Showers",
"Mirrors",
"Miscellaneous",
]
class GalleryDisplay extends React.Component {
constructor(props) {
super(props)
this.state = {
lightboxIsOpen: false,
currentImage: 0,
currentCategory: categories[0],
}
this.openLightbox = this.openLightbox.bind(this)
this.closeLightbox = this.closeLightbox.bind(this)
this.moveNext = this.moveNext.bind(this)
this.movePrev = this.movePrev.bind(this)
this.handleFilterChange = this.handleFilterChange.bind(this)
}
openLightbox(e, { index }) {
this.setState({
currentImage: index,
lightboxIsOpen: true,
})
}
closeLightbox() {
this.setState({
currentImage: 0,
lightboxIsOpen: false,
})
}
moveNext() {
this.setState({
currentImage: (this.state.currentImage + 1) % images.length,
})
}
movePrev() {
this.setState({
currentImage:
(this.state.currentImage - 1 + images.length) % images.length,
})
}
handleFilterChange(event) {
this.setState({
currentCategory: event.target.value,
})
}
render() {
<div>
<ImageLightbox
isOpen={this.state.lightboxIsOpen}
mainSrc={images[this.state.currentImage]}
nextSrc={images[(this.state.currentImage + 1) % images.length]}
prevSrc={
images[(this.state.currentImage - 1 + images.length) % images.length]
}
onCloseRequest={this.closeLightbox}
onMovePrevRequest={this.movePrev}
onMoveNextRequest={this.moveNext}
/>
</div>
return (
<>
<div className="flex flex-wrap justify-center py-4">
{categories.map(category => (
<button className="px-4 py-2 m-2 rounded-lg text-center text-white bg-blue-500 hover:bg-blue-600" onClick={() => this.handleFilterChange({target: {value: category}})}>{category}</button>
))}
</div>
<div className="grid p-8 lg:p-16 gap-x-4 gap-y-8 sm:grid-cols-0 sm:gap-x-4 md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 xl:gap-x-12" >
{images
.filter(
image =>
image.category === this.state.currentCategory ||
this.state.currentCategory === "All"
)
.map((image, index) => (
<a key={index} onClick={e => this.openLightbox(e, { index })}>
<img key={image.src} className="rounded-lg" src={image.src} alt={image.alt} />
</a>
))}
</div>
</>
)
}
}
export default GalleryDisplay;
Here is the gatsby-config file:
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
*/
/**
* #type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
siteMetadata: {
title: `Gatsby`,
siteUrl: `https://www.gatsbyjs.com`,
description: `Blazing fast modern site generator for React`,
},
},
plugins: [
`gatsby-plugin-image`,
'gatsby-plugin-postcss',
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
// This will impact how browsers show your PWA/website
// https://css-tricks.com/meta-theme-color-and-trickery/
// theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}

Answer 1

I was able to resolve this by first importing the image at the top of the component e.g. import mbaglass2 from "../mbaglass2.jpeg", then using its import name mbaglass2 in the array source. It seems it was a simple fix that way overlooked.