Accessing image url in Strapi

Question

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?

// constants
const strapi = 'http://localhost:1337/posts'
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"


function generateHTMLtemplate(data) {
  
  // let url = JSON.stringify(data.image.formats.small.url)
  // console.log(url)
  // ^this returns "Cannot read properties of undefined (reading 'url')"

  // console.log(api_url + url)
  // ^this also returns "Cannot read properties of undefined (reading 'url')"

  const { title, description } = data
  return `
    <div class="time-card-header">
    <header class="time-card-header">
    <div class="header-content">
    <h4 class="timeline-title"><span class="badge">${title}</span></h4>
    <p>${description}</p>
    <div class="circle">
 
    <img src=>
    
    </div>
    </div>
    </header>
     <div class="line"></div>
   </div>
`
}

// render to the dom

function renderDataToTheDom(node, data) {
  const html = data.map(item => 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("error", error.message)
  }
}


getData(strapi)

So I run into the issue as soon as I try to access the .url...

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

my json:

{
    "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"
    }
}

Answer 1

I had issues getting the image data on the API response. This answer on their forum helped.

Turns out Strapi auto filters relations. To get relations if anyone is wondering is to use the populate field in the call.

Example to get all relations:

GET: /api/books?populate=*

Answer 2

The answer lies in your json response. You don't have a key called Image in your response, rather it's called Photo. So all you need to do is access Photo.url and append the url to host localhost:1337/. Or if you wish to show the thumbnails, then you could use Photo.formats.thumbnail.url and append it similary to the host localhost:1337.

// constants
const strapi = 'http://localhost:1337/posts'
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"


function generateHTMLtemplate(data) {
  const { title, description, Photo } = data
  return `
    <div class="time-card-header">
    <header class="time-card-header">
    <div class="header-content">
    <h4 class="timeline-title"><span class="badge">${title}</span></h4>
    <p>${description}</p>
    <div class="circle">
 
    <img src="${api_url}/${Photo.url}"/>
    
    </div>
    </div>
    </header>
     <div class="line"></div>
   </div>`
}

// render to the dom
function renderDataToTheDom(node, data) {
  const html = data.map(item => 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("error", error.message)
  }
}

Answer 3

I was able to solve this issue by calling the base url: http://localhost:1337 + review.attributes.FeaturedImage.data.attributes.formats.thumbnail.url which is http://localhost:1337/uploads/thumbnail_food_logo_61b7e1b311.webp?width=379&height=379