Local Image Post-image

Local Image Post

Date published: 14-Jan-2021
1 min read / 33 words
React
GatsbyJs
ES6
Css

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis.

Gatsby

<GatsbyImage alt='...' image={...}/>

<GatsbyImage alt='...' image={...}/>

embedded-image-1
{
  "gatsbyImageData": {
    "layout": "fullWidth",
    "placeholder": {
      "fallback": "data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBv/EABYBAQEBAAAAAAAAAAAAAAAAAAIABP/aAAwDAQACEAMQAAABztJwRY8v/8QAFxAAAwEAAAAAAAAAAAAAAAAAARAhMf/aAAgBAQABBQIahH//xAAYEQACAwAAAAAAAAAAAAAAAAAAAQISIf/aAAgBAwEBPwGTwsz/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAaEAACAgMAAAAAAAAAAAAAAAAAARExEFGR/9oACAEBAAE/IeQ8NbZMuRUf/9oADAMBAAIAAwAAABCDD//EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAwEBPxCRtH//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QjI//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhMVFh/9oACAEBAAE/EICvj3l5kPCT6EwfmgAVozRAVvMM/9k="
    },
    "images": {
      "fallback": {
        "src": "/static/26a8c760a31bcb52c8fe902b0f3ceae9/98262/pankaj-patel-SXihyA4oEJs-unsplash.jpg",
        "srcSet": "/static/26a8c760a31bcb52c8fe902b0f3ceae9/07756/pankaj-patel-SXihyA4oEJs-unsplash.jpg 750w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/3db43/pankaj-patel-SXihyA4oEJs-unsplash.jpg 1080w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/67c67/pankaj-patel-SXihyA4oEJs-unsplash.jpg 1366w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/98262/pankaj-patel-SXihyA4oEJs-unsplash.jpg 1920w",
        "sizes": "100vw"
      },
      "sources": [
        {
          "srcSet": "/static/26a8c760a31bcb52c8fe902b0f3ceae9/0fc34/pankaj-patel-SXihyA4oEJs-unsplash.avif 750w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/77073/pankaj-patel-SXihyA4oEJs-unsplash.avif 1080w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/11bdb/pankaj-patel-SXihyA4oEJs-unsplash.avif 1366w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/24e77/pankaj-patel-SXihyA4oEJs-unsplash.avif 1920w",
          "type": "image/avif",
          "sizes": "100vw"
        },
        {
          "srcSet": "/static/26a8c760a31bcb52c8fe902b0f3ceae9/d79c1/pankaj-patel-SXihyA4oEJs-unsplash.webp 750w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/d578b/pankaj-patel-SXihyA4oEJs-unsplash.webp 1080w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/42feb/pankaj-patel-SXihyA4oEJs-unsplash.webp 1366w,\n/static/26a8c760a31bcb52c8fe902b0f3ceae9/827b6/pankaj-patel-SXihyA4oEJs-unsplash.webp 1920w",
          "type": "image/webp",
          "sizes": "100vw"
        }
      ]
    },
    "width": 1,
    "height": 0.6666666666666666
  }
}

Theme UI

<Image src={...} />

"/static/26a8c760a31bcb52c8fe902b0f3ceae9/98262/pankaj-patel-SXihyA4oEJs-unsplash.jpg"