React-Native - Image from Strapi not displaying correctly

System Information
  • Strapi Version 3.6.6:
  • Windows 7:
  • React Version 17.0.2:
  • *Node v12.20.2:
  • NPM Version 7.20.5:

Hi i was wondering if someone could please help me solve why an image I am fetching from Strapi backend, using a custom useFetch hook, is not appearing alongside the other data from the json object. I am using react native.

Here is the page component where the image should be displayed (i have given the image class “.review-card img” a width and height):

import React from 'react'

import { useParams } from 'react-router-dom'

import useFetch from '../hooks/useFetch'

export default function ReviewDetails() {

  const { id } = useParams()

  const { loading, error, data } = useFetch('http://localhost:1337/reviews/' + id)

  if (loading) return <p>Loading...</p>

  if (error) return <p>Error!</p>


  return (

    <div className="review-card">

      <div className="rating">







        console list













The hook useFetch gets the data like so:

import { useEffect, useState } from "react";

const useFetch = (url) => {

  const [data, setData] = useState(null)

  const [error, setError] = useState(null)

  const [loading, setLoading] = useState(true)

  useEffect(()=> {

    const fetchData = async () => {


      try {

        // get data from fetch API

        const res = await fetch(url)

        // pass data to JS object

        const json = await res.json()

        // update data after fetch


        // finish loading


      } catch (error) {






  }, [url])

    return { loading, error, data }


export default useFetch;

and also you can see in the console that the image attribute appears in the console

Is there a different way I should be referencing the image data as I have played around with quite a bit and can’t seem to work. Thanks for taking the time to read this and I appreciate any help you might be able to give.


1 Like