Get Images with ReactJS

Questions and Answers Frontend-React
1
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

2

for original image:

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

or for thumbnail:

return (
  <div>
    <img src={data.formats.thumbnail.url} />
  </div>
)
1 Like
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
4

did you find how to call image??

5

Hi am new to strapi, and am kind of finding it hard to make use of the thumbnail images. seeing this post made me happpy, but there is no solution here… :pray:

updated:
Solution if you are using the thumbnail

const ApiUrl = ‘http://localhost:1337’; // or deployed URL if working in a production enviroment

<img src={ApiUrl + data.img[0].formats.thumbnail.url} alt={data.title} />

6

Hi @tdammy. Thanks for the code solution for this question.

One caveat, as mentioned by @maggie0002 above, is that sometimes the formats for certain images might not exist so it can be good to enclose the rendering of an element in a conditional expression so that it doesn’t try to render if that format doesn’t exist. Like so with your example:

{data && data.img[0].formats.thumbnail && <img src={ApiUrl + data.img[0].formats.thumbnail.url} alt={data.title} />

Hope that helps!

-Rm

7

thank you bro!

8

is there a way to access directly to the thumbnail url from graphql???