Imágenes como fuente de datos

Clase 17 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Clase anteriorSiguiente clase

silvana murgo

student•

https://www.gatsbyjs.com/docs/working-with-images/

Pablo Maurig

student•

se puede hacer un query con props como variables? En este caso pasaría el nombre de la imagen y dentro del componente hace el query para buscarla

Miguel Angel Reyes Moreno

student•

Imágenes como fuente de datos

Working with Images in Gatsby

Si usamos GraphQL con este query:

{
  allFile{
    edges{
      node{
        id
        relativePath
        prettySize
        publicURL
      }
    }
  }
}

Obtendremos este resultado:

{
  "data": {
    "allFile": {
      "edges": [
        {
          "node": {
            "id": "c50f901b-53a0-5f6b-8f04-03f9f33226df",
            "relativePath": "Logo.png",
            "prettySize": "6.32 kB",
            "publicURL": "/static/3a035444978974a51ae8287cb2ff29f3/Logo.png"
          }
        },
        {
          "node": {
            "id": "d4447f6e-526b-52a1-859c-43b2e998fc6f",
            "relativePath": "cart.png",
            "prettySize": "515 B",
            "publicURL": "/static/92420c0eceec769bc40ef134a2fcfdcf/cart.png"
          }
        },
        {
          "node": {
            "id": "056b5e8a-6037-5d04-ab2d-66cc9398b29f",
            "relativePath": "gatsby-icon.png",
            "prettySize": "21.2 kB",
            "publicURL": "/static/4a9773549091c227cd2eb82ccd9c5e3a/gatsby-icon.png"
          }
        },
        {
          "node": {
            "id": "0a25e8ac-9c62-5144-8f94-f803206f686e",
            "relativePath": "mug.png",
            "prettySize": "56.5 kB",
            "publicURL": "/static/dee1beb3e04c46ffe81e08f73e3e4633/mug.png"
          }
        },
        {
          "node": {
            "id": "bea94ad1-92a7-5ab0-b1fb-ef0f0c80114e",
            "relativePath": "stickers1.png",
            "prettySize": "44.8 kB",
            "publicURL": "/static/3ed3194a818a11c32a80aa72b0ebe480/stickers1.png"
          }
        },
        {
          "node": {
            "id": "f9ccd07b-d131-54a7-90da-5b269c28e511",
            "relativePath": "camiseta.png",
            "prettySize": "97.1 kB",
            "publicURL": "/static/d442a8b550c7b907319f1107980f3c59/camiseta.png"
          }
        },
        {
          "node": {
            "id": "6fc38d8c-5d39-5088-8f4e-dccf699c3e43",
            "relativePath": "hoodie.png",
            "prettySize": "83.8 kB",
            "publicURL": "/static/49b11cd38984eeb59ed83e35872bedcb/hoodie.png"
          }
        },
        {
          "node": {
            "id": "6fc3aabd-b0db-5725-8b0c-8cf14b3a4dd1",
            "relativePath": "icon.png",
            "prettySize": "126 kB",
            "publicURL": "/static/fc299bb0dde2432db7f768171b09d328/icon.png"
          }
        },
        {
          "node": {
            "id": "2e44d622-9eec-5091-b26a-5b358689aa0f",
            "relativePath": "pin.png",
            "prettySize": "71.1 kB",
            "publicURL": "/static/43c2d2ed4ca064ce21c4b53ff37fb57a/pin.png"
          }
        },
        {
          "node": {
            "id": "07583d9f-5c0b-5ab2-97dd-ddd3b7fa6bb6",
            "relativePath": "stickers2.png",
            "prettySize": "110 kB",
            "publicURL": "/static/25f529332fa038fc71b6c83fd9d7a4cb/stickers2.png"
          }
        },
        {
          "node": {
            "id": "993b466a-67ad-5dd4-a9c9-023fe6e0ac6a",
            "relativePath": "gatsby-astronaut.png",
            "prettySize": "167 kB",
            "publicURL": "/static/6d91c86c0fde632ba4cd01062fd9ccfa/gatsby-astronaut.png"
          }
        }
      ]
    }
  },
  "extensions": {}
}

Willy Da Conceicao

student•

Si están ocupando gatsby-plugin-image y tienen imagenes dinamicas es decir las traen desde un CMS o cualquier otra fuente de datos se ocupa el componente GatsbyImage junto a getImage no soporta svg

https://www.gatsbyjs.com/plugins/gatsby-plugin-image/#dynamic-images

David Santiago González Ramos

student•

Tengo una duda, por qué en este query, no se inicia con la palabra reservada query como si se hizo en la clase anterior??

Cristian Blandón

student•

Cuando haces queries en GraphQL, la palabra query es opcional... Puedes ponerla y abrir llaves, o solo abrir llaves y por defecto se entenderá que quieres hacer una query.