Can't display image from Strapi in ReactJS (frontend)

Question

I can't show the images from Strapi to my ReactJS (frontend).

This is my Homepage code:

import React from "react";
import useFetch from "../hooks/useFetch";
import { Link } from "react-router-dom";

export default function Homepage() {
  const { loading, error, data } = useFetch(
    "http://localhost:1337/api/reviews"
  );


  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  console.log(data);

  return (
    <div>
      {data.data.map((review) => (
        <div key={review.id} className="review-card">
          <h1>{review.attributes.title}</h1>
          <img src={'http://localhost:1337/api/reviews?populate=reviewImage'} alt={"Not Working!"}/>
        </div>
      ))}
    </div>
  );
}

This is the output:

This is the data I'm getting in postman:

Answer 1

So as it is not stated in your initial question, I guess you are using Strapi v4...

With Strapi v4 you have to keep one big change in mind. Strapi V4 doesn’t return media files or relation data by default. Thus, you will need to adapt your request as it is outlined in the docs.

Move to this question to see further details: https://stackoverflow.com/a/71706954/3406465

To solve your first problem I would suggest to adapt your fetch call. So simply include the populte field (like you already do @ img src) and you will get the image data. You can test this with Postman and compare the results.

Then your second problem is that the img src wants to have an url. In your example you would more or less assign the full json response. But as soon as you try to solve your first problem you will see what I mean. Then you can use it similar to this:

 <img src={`${REPLACEWITHYOURBASEURL}${review.attributes.reviewImage.data.attributes.url}`}></img>

Answer 2

I'm not sure if I'm missing something, but I don't see any attribute that relates to an image URL.

1. you fetch the data from http://localhost:1337/api/reviews

2. you iterate over the data within the return statement

3. from glancing over your iteration, you point the src to http://localhost:1337/api/reviews?populate=reviewImage although, http://localhost:1337/api/reviews doesn't seem to have any attribute that contains an image.

furthermore, unless that API endpoint returns the image itself, that source is incorrect.

My Suggestion:

if it's possible to modify whatever API you're using, i'd do something along this route:

append the direct image URL link to the response you get from http://localhost:1337/api/reviews once you've done so, you'd be able to target it just like you did with the title and do something like that:

      {data.data.map((review) => (
        <div key={review.id} className="review-card">
          <h1>{review.attributes.title}</h1>
          <img src={review.attributes.image} alt={...}/>
        </div>
      ))}
    </div>```