See the CMS images section for a list of supported CMSs. For these, you should see the individual plugin documentation for details on query syntax. Many CMSs support gatsby-plugin-image without needing to download and process images locally. If you need to have dynamic images (such as if they are coming from a CMS), you can load them via GraphQL and display them using the GatsbyImage component. If you find yourself wishing you could use a prop for the image src then it’s likely that you should be using a dynamic image. For more information, refer to the Reference Guide: Gatsby Image plugin. Note: There are a few technical restrictions to the way you can pass props into StaticImage. It uses the "fixed" layout, which means the image does not resize with its container. Before loading it will have a blurred, low-resolution placeholder. This component renders a 200px by 200px image of a dinosaur. You can find the full list of options in the API docs. There are also advanced image processing options available. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. You configure the image by passing props to the component. If the image is changed on the other server, it will not be updated on your site until you rebuild. Important: Remote images are downloaded and resized at build time. It should either be a static string, or a local variable in the component’s scope. When you build your site, the StaticImage component will load the image from your filesystem or from the remote URL, and it will generate all the sizes and formats that you need to support a responsive image.īecause the image is loaded at build time, you cannot pass the filename in as a prop, or otherwise generate it outside of the component. If you are using a remote image, pass the image URL in the src prop: If your component file was src/components/dino.js, then you would load the image like this: The path is relative to the source file itself. Import the component, then set the src prop to point to the image you added earlier. A folder such as src/images is a good choice.Īdd the StaticImage component to your template. If you are using a local image, copy it into the project. Any remote images are downloaded and resized at build time. The image can be either a local file in your project, or an image hosted on a remote server. If you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the StaticImage component. If it will change, whether through data coming from a CMS or different values passed to a component each time you use it, then it is a dynamic image and you should use the GatsbyImage component. If it will always be the same, then use StaticImage. The simplest way to decide which you need is to ask yourself: “will this image be the same every time the component or template is used?”. The Gatsby Image plugin includes two image components: one for static and one for dynamic images. Using the Gatsby Image components Decide which component to use Otherwise, downloading the dependency without configuration is sufficient. If you are sourcing from your local filesystem to use GatsbyImage please configure accordingly. Note that gatsby-source-filesystem is not included in this config. If you already have some of these plugins installed, please check that they’re updated to the latest version. Add the plugins to your gatsby-config.js:.For full documentation on all configuration options, see the reference guide. ![]() Want to learn more about image optimization challenges? Read the Conceptual Guide: Why Gatsby’s Automatic Image Optimizations Matter. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you! If you’re looking for a guide on using the deprecated gatsby-image package, it can be found in the How to use Gatsby Image doc.Īdding responsive images to your site while maintaining high performance scores can be difficult to do manually.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |