title: Accessing image url in Strapi
body: <p>I'm having some serious difficulties accessing my images from Strapi, and everything that I've come across on here just says to add 'http://localhost:1337' before accessing the URL but that's not working for me. I'm super confused as to whats going and I also don't understand why it's so difficult to access them in the first place?</p>
  <pre><code>// constants
  const strapi = 'http://localhost:1337/posts'
  const rootNode = document.getElementById('root');
  const api_url = &quot;http://localhost:1337&quot;
  
  
  function generateHTMLtemplate(data) {
    
    // let url = JSON.stringify(data.image.formats.small.url)
    // console.log(url)
    // ^this returns &quot;Cannot read properties of undefined (reading 'url')&quot;
  
    // console.log(api_url + url)
    // ^this also returns &quot;Cannot read properties of undefined (reading 'url')&quot;
  
    const { title, description } = data
    return `
      &lt;div class=&quot;time-card-header&quot;&gt;
      &lt;header class=&quot;time-card-header&quot;&gt;
      &lt;div class=&quot;header-content&quot;&gt;
      &lt;h4 class=&quot;timeline-title&quot;&gt;&lt;span class=&quot;badge&quot;&gt;${title}&lt;/span&gt;&lt;/h4&gt;
      &lt;p&gt;${description}&lt;/p&gt;
      &lt;div class=&quot;circle&quot;&gt;
   
      &lt;img src=&gt;
      
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/header&gt;
       &lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
  `
  }
  
  // render to the dom
  
  function renderDataToTheDom(node, data) {
    const html = data.map(item =&gt; generateHTMLtemplate(item)).join('')
    console.log(html)
    node.innerHTML = html
  }
  
  // renderDataToTheDom(root, [1,2,3])
  
  async function getData(url) {
    try {
      const response = await fetch(url)
      const data = await response.json();
      renderDataToTheDom(root, data)
    } catch (error){ 
    console.log(&quot;error&quot;, error.message)
    }
  }
  
  
  getData(strapi)
  </code></pre>
  <p>So I run into the issue as soon as I try to access the <code>.url</code>...</p>
  <p>I would really appreciate any help on this, I've also tried to use an S3 plugin that I saw some people suggest but that didn't work either and I'd rather keep the solution as simple as possible as the site is a pretty simple one</p>
  <p>my json:</p>
  <pre><code>{
      &quot;id&quot;: 1,
      &quot;Title&quot;: &quot;Santa Dog Picture&quot;,
      &quot;published_at&quot;: &quot;2021-03-29T02:45:32.389Z&quot;,
      &quot;created_at&quot;: &quot;2021-03-29T02:45:23.362Z&quot;,
      &quot;updated_at&quot;: &quot;2021-03-29T02:45:32.414Z&quot;,
      &quot;Photo&quot;: {
          &quot;id&quot;: 3,
          &quot;name&quot;: &quot;Pets3.jpg&quot;,
          &quot;alternativeText&quot;: &quot;&quot;,
          &quot;caption&quot;: &quot;&quot;,
          &quot;width&quot;: 4000,
          &quot;height&quot;: 6000,
          &quot;formats&quot;: {
              &quot;thumbnail&quot;: {
                  &quot;name&quot;: &quot;thumbnail_Pets3.jpg&quot;,
                  &quot;hash&quot;: &quot;thumbnail_Pets3_a4be530d90&quot;,
                  &quot;ext&quot;: &quot;.jpg&quot;,
                  &quot;mime&quot;: &quot;image/jpeg&quot;,
                  &quot;width&quot;: 104,
                  &quot;height&quot;: 156,
                  &quot;size&quot;: 5.74,
                  &quot;path&quot;: null,
                  &quot;url&quot;: &quot;/uploads/thumbnail_Pets3_a4be530d90.jpg&quot;
              },
              &quot;large&quot;: {
                  &quot;name&quot;: &quot;large_Pets3.jpg&quot;,
                  &quot;hash&quot;: &quot;large_Pets3_a4be530d90&quot;,
                  &quot;ext&quot;: &quot;.jpg&quot;,
                  &quot;mime&quot;: &quot;image/jpeg&quot;,
                  &quot;width&quot;: 667,
                  &quot;height&quot;: 1000,
                  &quot;size&quot;: 85.36,
                  &quot;path&quot;: null,
                  &quot;url&quot;: &quot;/uploads/large_Pets3_a4be530d90.jpg&quot;
              },
              &quot;medium&quot;: {
                  &quot;name&quot;: &quot;medium_Pets3.jpg&quot;,
                  &quot;hash&quot;: &quot;medium_Pets3_a4be530d90&quot;,
                  &quot;ext&quot;: &quot;.jpg&quot;,
                  &quot;mime&quot;: &quot;image/jpeg&quot;,
                  &quot;width&quot;: 500,
                  &quot;height&quot;: 750,
                  &quot;size&quot;: 56.22,
                  &quot;path&quot;: null,
                  &quot;url&quot;: &quot;/uploads/medium_Pets3_a4be530d90.jpg&quot;
              },
              &quot;small&quot;: {
                  &quot;name&quot;: &quot;small_Pets3.jpg&quot;,
                  &quot;hash&quot;: &quot;small_Pets3_a4be530d90&quot;,
                  &quot;ext&quot;: &quot;.jpg&quot;,
                  &quot;mime&quot;: &quot;image/jpeg&quot;,
                  &quot;width&quot;: 333,
                  &quot;height&quot;: 500,
                  &quot;size&quot;: 31.39,
                  &quot;path&quot;: null,
                  &quot;url&quot;: &quot;/uploads/small_Pets3_a4be530d90.jpg&quot;
              }
          },
          &quot;hash&quot;: &quot;Pets3_a4be530d90&quot;,
          &quot;ext&quot;: &quot;.jpg&quot;,
          &quot;mime&quot;: &quot;image/jpeg&quot;,
          &quot;size&quot;: 2031.2,
          &quot;url&quot;: &quot;/uploads/Pets3_a4be530d90.jpg&quot;,
          &quot;previewUrl&quot;: null,
          &quot;provider&quot;: &quot;local&quot;,
          &quot;provider_metadata&quot;: null,
          &quot;created_at&quot;: &quot;2021-03-29T02:42:56.325Z&quot;,
          &quot;updated_at&quot;: &quot;2021-03-29T02:42:56.464Z&quot;
      }
  }
  </code></pre>