Así que he estado tratando de mostrar una imagen en mi página con una API, pero cada vez que voy a la página veo la imagen durante unos segundos y luego la página se actualiza y muestra un error:

 Uncaught TypeError: location is undefined

Creo que el problema podría deberse a la forma en que usé mi imagen, pero no estoy seguro. Si registro la imagen en la consola, solo muestra el nombre correcto de la imagen. Este es el código que usé:

 import { Row, Col } from "react-grid-system"; import { Separator } from "@fluentui/react"; import * as React from "react"; import { useEffect, useState } from "react"; function Recipe(props) { const axios = require('axios'); const api = axios.create({ baseURL: 'http://localhost:5000/', timeout: 10000 }) const [recipe, setRecipe] = useState({}); const [image, setImage] = useState({}); useEffect(() => { getRecipe() }, []) function getRecipe() { api.get('/recipe/' + props.id).then(res => { setRecipe(res.data); setImage("https://localhost:5001/Uploads/" + res.data.image) }); } return ( <div> <div> <Row> <Col sm={6} md={6} lg={6}> <img style={{ width: "700px", marginTop: "20px" }} src={image} alt={"error"} /> </Col> <Col style={{ marginTop: "20px" }} sm={6} md={6} lg={6}> <Separator className={"Separator"} /> <h1>Naam: <div style={{ fontSize: "20px" }}>{recipe.name}</div></h1> <h1>Ingredienten: <div style={{ fontSize: "20px" }}> {recipe.ingredients}</div> </h1> <h1>Macro's: <div style={{ fontSize: "20px" }}> <ul> <li>Kcal: {recipe.carbs}</li> </ul> </div> </h1> <h1>Voorbereiding: <div style={{ fontSize: "12px" }}> {recipe.preparation} </div></h1> </Col> </Row> </div> </div> ) } export default Recipe