Get Images with ReactJS

System Information
  • ** [v3.2.5]**:
  • Windows 10 with WSL ubuntu:
  • PostgreSQL:
  • v12.18.0:
  • 6.14.4:
  • 1.19.0:

Hi, I have an image with fields uploaded in Collections Type.
I can get the fields with JSON.Stringify, but I need to get the values from the json string. I’ve tried a lot of ways to do the parse, but it just don’t work. This is the code that brings the stringify

import React, { FC } from “react”

import { useFazemosList } from “Api/OQueFazemos”

import Loading from “Components/Loading”

export const ListAll: FC = () => {

const { data, error, isLoading } = useFazemosList()

// if is loading data

if (isLoading) return

// if there were any errors

if (error) return

error: { error?.message ?? “” }

// if reached here, we know that data is loaded and there is no error

const test = data!

return (

<div>

  <pre>

  {JSON.stringify(test)}

  </pre>

</div>

)

}

export default ListAll

And this is how it returns

{
“Titulo”:“Teste”,
“descricao”:“Teste”,
“imagem”:{
“id”:2,
“name”:“EkDu0xxXgAcRWwW.png”,
“alternativeText”:"",
“caption”:"",
“width”:425,
“height”:424,
“formats”:{
“thumbnail”:{
“ext”:".png",
“url”:“https://starter-project-bucket.s3.sa-east-1.amazonaws.com/thumbnail_Ek_Du0xx_Xg_Ac_R_Ww_W_bcf827f448.png”,
“hash”:“thumbnail_Ek_Du0xx_Xg_Ac_R_Ww_W_bcf827f448”,
“mime”:“image/png”,
“name”:“thumbnail_EkDu0xxXgAcRWwW.png”,
“path”:null,
“size”:40.7,
“width”:156,
“height”:156
}
},
“hash”:“Ek_Du0xx_Xg_Ac_R_Ww_W_bcf827f448”,
“ext”:".png",
“mime”:“image/png”,
“size”:199.47,
“url”:“https://starter-project-bucket.s3.sa-east-1.amazonaws.com/Ek_Du0xx_Xg_Ac_R_Ww_W_bcf827f448.png”,
“previewUrl”:null,
“provider”:“aws-s3”,
“provider_metadata”:null,
“created_at”:“2020-11-19T17:43:32.470Z”,
“updated_at”:“2020-11-19T17:43:32.503Z”
}
}

How can I make the parse and be able to get the values and the url to put in a img tag?
Sorry for my english

for original image:

return (
  <div>
    <img src={data.url} />
  </div>
)

or for thumbnail:

return (
  <div>
    <img src={data.formats.thumbnail.url} />
  </div>
)