React-Native - Image from Strapi not displaying correctly

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

  console.log(data);

  return (

    <div className="review-card">

      <div className="rating">

        {data.rating}/10

      </div>

      <h2>

        {data.title}

      </h2>

      <small>

        console list

      </small>

      <img

        src={data.image}

        alt=""

        className="review-image" 

      />

      <p>

        {data.body}

      </p>

    </div>

  )

}

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 () => {

      setLoading(true)

      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

        setData(json)

        // finish loading

        setLoading(false)

      } catch (error) {

        setError(error)

        setLoading(false)

      }

    }

    fetchData()

  }, [url])

    return { loading, error, data }

}

export default useFetch;

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

Untitled3
Untitled31722×896 86.9 KB

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.

Thanks!

1 Like