Get Images with ReactJS

Questions and Answers Frontend-React
3

When uploading images - in my case a logo as part of a collection type - it seems that if the image is below a certain size, it won’t generate a logo thumbnail and data.logo.formats.thumbnail.url won’t exist to be able to query. So if I use the thumbnail string here, I get errors as it is querying something that doesn’t exist.

Is this expected, as opposed to having data.logo.formats.thumbnail.url = null? If it is meant to only be created in certain instances, is their a suggested workaround (working in Vue)?

It seems at a minimum it needs to check .logo exists and logo.format exists before querying data.logo.formats.thumbnail.url. But then sometimes the small, medium or large images won’t have entries for them either, so if .logo exists, logo.format exists, there may not be a logo.format.small (not even an entry as null).

Here is an example response from GraphQL:

   "id": "602ad847d2c570000d9e95fd",
    "logo": {
      "formats": {
        "thumbnail": {
          "name": "thumbnail_Screenshot 2021-02-18 at 18.08.57.png",
          "hash": "thumbnail_Screenshot_2021_02_18_at_18_08_57_ebd58a71e6",
          "ext": ".png",
          "mime": "image/png",
          "width": 245,
          "height": 130,
          "size": 33.92,
          "path": null,
          "url": "/uploads/thumbnail_Screenshot_2021_02_18_at_18_08_57_ebd58a71e6.png"
        },
        "small": {
          "name": "small_Screenshot 2021-02-18 at 18.08.57.png",
          "hash": "small_Screenshot_2021_02_18_at_18_08_57_ebd58a71e6",
          "ext": ".png",
          "mime": "image/png",
          "width": 500,
          "height": 265,
          "size": 156.84,
          "path": null,
          "url": "/uploads/small_Screenshot_2021_02_18_at_18_08_57_ebd58a71e6.png"
        }
      },
      "url": "/uploads/Screenshot_2021_02_18_at_18_08_57_ebd58a71e6.png",
      "size": 173.18
    }
  },
  {
    "id": "602d6a6e7c8852000d2c1080",
    "logo": {
      "formats": {
        "thumbnail": {
          "name": "thumbnail_c174e38c93f6d086d285f441239588d7.png",
          "hash": "thumbnail_c174e38c93f6d086d285f441239588d7_bac8a8fd1f",
          "ext": ".png",
          "mime": "image/png",
          "width": 156,
          "height": 156,
          "size": 46.86,
          "path": null,
          "url": "/uploads/thumbnail_c174e38c93f6d086d285f441239588d7_bac8a8fd1f.png"
        }
      },
      "url": "/uploads/c174e38c93f6d086d285f441239588d7_bac8a8fd1f.png",
      "size": 36.03
    }
  },
1 Like