@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
44import {
55 graphql , useStaticQuery , navigate , Link ,
66} from 'gatsby' ;
7- import Img from 'gatsby-image' ;
7+ import { GatsbyImage } from 'gatsby-plugin -image' ;
88import Typography from '@material-ui/core/Typography' ;
99import Button from '@material-ui/core/Button' ;
1010import Divider from '@material-ui/core/Divider' ;
@@ -36,23 +36,17 @@ const Home = () => {
3636 },
3737 deadhash: file(relativePath: { eq: "DeadHash/DeadHash.png" }) {
3838 childImageSharp {
39- fluid(maxHeight: 250) {
40- ...GatsbyImageSharpFluid
41- }
39+ gatsbyImageData(layout: FULL_WIDTH)
4240 }
4341 },
4442 memplus: file(relativePath: { eq: "MemPlus/memplus.png" }) {
4543 childImageSharp {
46- fluid(maxHeight: 250) {
47- ...GatsbyImageSharpFluid
48- }
44+ gatsbyImageData(layout: FULL_WIDTH)
4945 }
5046 },
5147 pkfinder: file(relativePath: { eq: "PK Finder/pkfinder.png" }) {
5248 childImageSharp {
53- fluid(maxHeight: 250) {
54- ...GatsbyImageSharpFluid
55- }
49+ gatsbyImageData(layout: FULL_WIDTH)
5650 }
5751 }
5852 }` ) ;
@@ -89,10 +83,12 @@ const Home = () => {
8983 < Grid container spacing = { 2 } >
9084 < Grid item xs = { 12 } md = { 6 } lg = { 6 } >
9185 < Link to = "/software/memplus" >
92- < Img fluid = { {
93- ...data . memplus . childImageSharp . fluid ,
94- aspectRatio : 21 / 9 ,
95- } }
86+ < GatsbyImage
87+ image = { {
88+ ...data . memplus . childImageSharp . gatsbyImageData ,
89+ aspectRatio : 21 / 9 ,
90+ } }
91+ alt = "MemPlus"
9692 />
9793 </ Link >
9894 </ Grid >
@@ -121,10 +117,12 @@ const Home = () => {
121117 < Grid container spacing = { 2 } >
122118 < Grid item xs = { 12 } md = { 6 } lg = { 6 } >
123119 < Link to = "/software/deadhash" >
124- < Img fluid = { {
125- ...data . deadhash . childImageSharp . fluid ,
126- aspectRatio : 21 / 9 ,
127- } }
120+ < GatsbyImage
121+ image = { {
122+ ...data . deadhash . childImageSharp . gatsbyImageData ,
123+ aspectRatio : 21 / 9 ,
124+ } }
125+ alt = "DeadHash"
128126 />
129127 </ Link >
130128 </ Grid >
@@ -153,10 +151,12 @@ const Home = () => {
153151 < Grid container spacing = { 2 } >
154152 < Grid item xs = { 12 } md = { 6 } lg = { 6 } >
155153 < Link to = "/software/pk-finder" >
156- < Img fluid = { {
157- ...data . pkfinder . childImageSharp . fluid ,
158- aspectRatio : 21 / 9 ,
159- } }
154+ < GatsbyImage
155+ image = { {
156+ ...data . pkfinder . childImageSharp . gatsbyImageData ,
157+ aspectRatio : 21 / 9 ,
158+ } }
159+ alt = "PK Finder"
160160 />
161161 </ Link >
162162 </ Grid >
0 commit comments