title: Accessing image URL from API (strapi) - is this possible?
body: <p>I’m building a simple portfolio website for a photographer. The collection type that I’m trying to display is called pet pictures, with fields for a title and an image. I’m able to call the API with an async function, but once I have the JSON data from the API, I’m not able to access the URL for the photos. I can create a heading that shows the title of each Pet Picture, for example, but I cannot use standard object notation to access the URL in the JSON data and then display the image. Is this literally impossible? I’m losing my mind a bit.</p>
  <p>For example, taking an array of JSON data that looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      "id": 1,
      "Title": "Santa Dog Picture",
      "published_at": "2021-03-29T02:45:32.389Z",
      "created_at": "2021-03-29T02:45:23.362Z",
      "updated_at": "2021-03-29T02:45:32.414Z",
      "Photo": {
          "id": 3,
          "name": "Pets3.jpg",
          "alternativeText": "",
          "caption": "",
          "width": 4000,
          "height": 6000,
          "formats": {
              "thumbnail": {
                  "name": "thumbnail_Pets3.jpg",
                  "hash": "thumbnail_Pets3_a4be530d90",
                  "ext": ".jpg",
                  "mime": "image/jpeg",
                  "width": 104,
                  "height": 156,
                  "size": 5.74,
                  "path": null,
                  "url": "/uploads/thumbnail_Pets3_a4be530d90.jpg"
              },
              "large": {
                  "name": "large_Pets3.jpg",
                  "hash": "large_Pets3_a4be530d90",
                  "ext": ".jpg",
                  "mime": "image/jpeg",
                  "width": 667,
                  "height": 1000,
                  "size": 85.36,
                  "path": null,
                  "url": "/uploads/large_Pets3_a4be530d90.jpg"
              },
              "medium": {
                  "name": "medium_Pets3.jpg",
                  "hash": "medium_Pets3_a4be530d90",
                  "ext": ".jpg",
                  "mime": "image/jpeg",
                  "width": 500,
                  "height": 750,
                  "size": 56.22,
                  "path": null,
                  "url": "/uploads/medium_Pets3_a4be530d90.jpg"
              },
              "small": {
                  "name": "small_Pets3.jpg",
                  "hash": "small_Pets3_a4be530d90",
                  "ext": ".jpg",
                  "mime": "image/jpeg",
                  "width": 333,
                  "height": 500,
                  "size": 31.39,
                  "path": null,
                  "url": "/uploads/small_Pets3_a4be530d90.jpg"
              }
          },
          "hash": "Pets3_a4be530d90",
          "ext": ".jpg",
          "mime": "image/jpeg",
          "size": 2031.2,
          "url": "/uploads/Pets3_a4be530d90.jpg",
          "previewUrl": null,
          "provider": "local",
          "provider_metadata": null,
          "created_at": "2021-03-29T02:42:56.325Z",
          "updated_at": "2021-03-29T02:42:56.464Z"
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This does not work:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const displayPhoto = async () =&gt; {
      const response = await fetch('/pet-pictures')
      const petPictures = await response.json()
  
  console.log(petPictures)
  const container = document.querySelector('#pets')
  
  
  petPictures.forEach((picture) =&gt;{
     
  const photo = document.createElement('img')
  photo.setAttribute('src', picture.Photo.formats.small.url)
  container.appendChild(photo)
  
  })
  
  }
  
  displayPhoto()</code></pre>
  </div>
  </div>
  </p>
  <p>I get a TypeError: cannot read property ‘formats’ of undefined. But if I replace photo with title, and create an h1 and set it’s text content to picture.title, that works. I’m losing my mind here! Apologies if I’m missing something super obvious and embarrassing.</p>