docs(gatsby-plugin-image): Update now we know min gatsby version (#27473)

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

Author: ascorbic

packages/gatsby-plugin-image/README.md

@@ -2,15 +2,15 @@
 
 This plugin is a replacement for gatsby-image. It adds [static images](#static-images), and a [new higher-performance gatsby-image component](#gatsby-image-next-generation).
 
-This package is in alpha, and the API will change. It is not ready for production use yet.
+This package is in alpha, and the API will change. It is not ready for production use yet, but feedback would be great.
 
 ## Usage
 
-Install `gatsby-plugin-image`, then add it to your `gatsby-config.js`.
+Install `gatsby-plugin-image` and `gatsby-plugin-sharp`, then add them to your `gatsby-config.js`. Upgrade `gatsby` to at least `2.24.78`.
 
 # Static images
 
-The [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/) component, combined with the sharp plugin, is a great way to automatically resize and optimize your images and serve them in the most performant way. This plugin is a proof of concept for a simpler way to use Gatsby's image processing tools without needing to write GraphQL queries. It is designed for static images such as logos rather than ones loaded dynamically from a CMS.
+This plugin is a proof of concept for a simpler way to use Gatsby's image processing tools and components without needing to write GraphQL queries. It is designed for static images such as logos rather than ones loaded dynamically from a CMS.
 
 The current way to do this is with `useStaticQuery`:
 
@@ -58,8 +58,6 @@ export const Dino = () => (
   <StaticImage
     src="trex.png"
     base64={false}
-    fluid
-    webP
     grayscale
     maxWidth={200}
     alt="T-Rex"
@@ -109,7 +107,7 @@ The props must be able to be statically-analyzed at build time. You can't pass t
 //Doesn't work
 () => {
     const width = getTheWidthFromSomewhere();
-    return <Img src="trex-png" width={width}>
+    return <Img src="trex.png" width={width}>
 }
 ```
 
@@ -119,7 +117,7 @@ You can use variables and expressions if they're in the scope of the file, e.g.:
 //OK
 () => {
     const width = 300
-    return <Img src="trex-png" width={width}>
+    return <Img src="trex.png" width={width}>
 }
 ```
 
@@ -130,7 +128,7 @@ const width = 300
 
 () => {
     const height = width * 16 / 9
-    return <Img src="trex-png" width={width} height={height}>
+    return <Img src="trex.png" width={width} height={height}>
 }
 ```
 
@@ -155,7 +153,7 @@ module.exports = {
 
 ### API
 
-The only required prop is `src`. The default type is `fixed`.
+The only required prop is `src`. The default type is `fixed`. The other props match those of [the new GatsbyImage component](#gatsby-image-next-generation)
 
 ## gatsby-image next generation
 

packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts

@@ -6,6 +6,7 @@ import path from "path"
 import { slash } from "gatsby-core-utils"
 
 import template from "@babel/template"
+import { stripIndent } from "common-tags"
 
 /**
  * This is a plugin that finds StaticImage components and injects the image props into the component.
@@ -63,9 +64,12 @@ export default function attrs({
             data = fs.readJSONSync(filename)
           } catch (e) {
             // TODO add info about minimum Gatsby version once this is merged
-            console.warn(
-              `[gatsby-plugin-image] Could not read image data file "${filename}". This may mean that the images in "${this.filename}" were not processed.`
-            )
+            const msg = stripIndent`
+            Could not read image data file "${filename}". 
+            This may mean that the images in "${this.filename}" were not processed.
+            Please ensure that your gatsby version is at least 2.24.78.`
+            error += msg
+            console.warn(`[gatsby-plugin-image] ${msg}`)
           }
         }
 

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -73,7 +73,7 @@ export function _getStaticImage(
     console.warn(`Image not loaded`, src)
     if (!__error && process.env.NODE_ENV === `development`) {
       console.warn(
-        `Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js`
+        `Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78`
       )
     }
     return null