nsamart.blogg.se - Plugin likes yanobox nodes 2 windows

The steps below will help you find and download some photos for your hero images and add them to the frontmatter for each of your blog posts. These images are usually large, high-quality photos that are meant to grab the reader’s attention and make them want to stay on the page longer. Many blog sites include a hero image at the top of each post.

Since the image source you’ll load in the page template will change for each blog post, you’ll use the GatsbyImage component. mdx files to specify which image to use for each post. You’ll also add some frontmatter data to your blog post. In this part of the Tutorial, you’ll add a hero image to your blog post page template. If you ask someone to point you to the best coffee shop in town, where you end up will depend on whom you ask and what their personal preferences are. Using the GatsbyImage component is like asking for directions more generically.You’ll always end up in the same place, no matter how many people you ask. Using the StaticImage component is like asking for directions using a physical address, like “400 Main Street”.Here’s a quick analogy to help illustrate the difference:

The GatsbyImage component is for dynamic image sources, like if the image source gets passed in as a prop.

In other words, the source for your image is always going to be the same every time the component renders.

The StaticImage component is for static image sources, like a hard-coded file path or remote URL.

How do you know whether to use the StaticImage component or the GatsbyImage component? The decision ultimately comes down to whether or not your image source is going to be the same every time the component renders. What’s the difference between GatsbyImage and StaticImage?īack in Part 3 of the Tutorial, you learned about how to use the StaticImage component from gatsby-plugin-image.