HI i have been learning gatsby and im trying to use gatsby image but my images are not showing however you ca see it in the console wit 0 x 0 pixels. below I will put in the code for my config file and the file with the query along with a screenshot of the console
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Mo-Travel`,
description: `My travel website showcasing the best destinations and deals`,
author: `Mohamed Mohamud`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `video`,
path: `${__dirname}/src/assets/videos`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data/`,
},
},
],
};
query file
import React from 'react';
import styled from 'styled-components';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import { Button } from './Button';
const Trips = () => {
const data = useStaticQuery(graphql`
query MyQuery {
allTripsJson {
edges {
node {
alt
button
name
img {
childImageSharp {
fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
`);
function getTrips(data) {
const tripsArray = [];
data.allTripsJson.edges.forEach((item, index) => {
tripsArray.push(
<ProductCard key={index}>
<Img
src={item.node.img.childImageSharp.fluid.src}
alt={item.node.alt}
fluid={item.node.img.childImageSharp.fluid}
/>
<ProductInfo>
<TextWrap>
<ImLoaction />
<ProductTitle>{item.node.name}</ProductTitle>
</TextWrap>
<Button to='/trips'>{item.node.button}</Button>
</ProductInfo>
</ProductCard>
);
});
return tripsArray;
}
return (
<ProductsContainer>
<ProductsHeading>Heading</ProductsHeading>
<ProductWrapper>{getTrips(data)}</ProductWrapper>
</ProductsContainer>
);
};
export default Trips;
const ProductsContainer = styled.div`
min-height: 100vh;
padding: 5rem calc((100vw -1300px) / 2);
background: violet;
color: #fff;
`;
const ProductsHeading = styled.div`
font-size: clamp(1.2rem, 5vw, 3rem);
text-align: center;
margin-bottom: 5rem;
color: #000;
`;
const ProductWrapper = styled.div``;
const ProductCard = styled.div``;
const ProductInfo = styled.div``;
const TextWrap = styled.div``;
const ImLoaction = styled.div``;
const ProductTitle = styled.div``;
