Show image with path from an API in ReactJs

Question

i get data from an API and i want to display the picture via a path that the api give to me

I have this simple code to get a random actor, And i have all of his information save as a json such as this data : profile_path: "/j2Yahha9C0zN5DRaTDzYA7WtdOT.jpg"

How can i use this path to show the picture with<img src="??"/>


function Game() {
  const [page, setPage] = useState(1);
  const [apiResponse, setApiResponse] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const API_KEY_MOVIE_DB = 'xxxxxxxxxxxxxxxxx';

  useEffect(() => {
    const myInit = {
        method: "GET",
        mode: "cors",
      };
      const random_0_20 = parseInt(Math.random() * (200 - 1) + 1);
      const actor = fetch(`https://api.themoviedb.org/3/person/${random_0_20}?api_key=${API_KEY_MOVIE_DB}`, myInit)
      .then(res => res.json())
      .then(response => {
        setApiResponse(JSON.stringify(response));
        setIsLoading(false);
        localStorage.setItem(`${random_0_20}`, JSON.stringify(response))
      })
      .catch(error => console.log(error));
    }, [page]);

  return (
    <div>
        {isLoading && <p>Loading</p>}
        {apiResponse}
        <img src={apiResponse.profile_path}></img>
    </div>
  );
} ```

David · Accepted Answer · 2021-08-16 14:58:50Z

1

You're setting the state to a string:

setApiResponse(JSON.stringify(response))

And a string has no property called profile_path:

<img src={apiResponse.profile_path}></img>

If the result from the API is an object, just set the state to that object:

setApiResponse(response)

You should also initialize the state to an object, rather than an array:

const [apiResponse, setApiResponse] = useState({});

Possibly even with the property set to a default value, to avoid "undefined" rendering in the markup:

const [apiResponse, setApiResponse] = useState({ profile_path: '' });

Strings, objects, and arrays are all very different things. Keep the types of your variables consistent so the behavior of the code remains consistent.

answered Aug 16, 2021 at 14:58

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Quentin Riols Over a year ago

I just add all of you're saying, thank's for that ! but so now that the path is well store and i can see the path string in console.log(apiResponse.profile_path) Even now, the image is still blank with the path ` <img src={apiResponse.profile_path}/>`

David Over a year ago

@QuentinRiols: What is the runtime value of apiResponse.profile_path when this happens? When you right-click on the element in your browser and inspect it, what is the exact <img/> element in the DOM? Are there any errors at all in the browser's development console or network tab of the debugging tools when it tries to fetch the image?

Quentin Riols Over a year ago

In the element in the browser it's look like <img src="/rfJtncHewKVnHjqpIZvjn24ESeC.jpg"/> I don't understand where should I find the rest of the <img src={}/>path

David Over a year ago

@QuentinRiols: And is "/rfJtncHewKVnHjqpIZvjn24ESeC.jpg" the expected value? If so then the code is working as designed. But if you don't actually have an image at that path then that's a separate problem entirely. Perhaps the API from which you get this data expects you to use that path on their server, instead of on yours? So you're prepend it with a URL to their service?

David Over a year ago

@QuentinRiols: It's worth a try. If that doesn't work then you may need to check with that 3rd party API to find out more information.

Collectives™ on Stack Overflow

Show image with path from an API in ReactJs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related