My website fetches data from the Spoonacular API to search for ingredients, receiving responses with titles and images. I have defined the types as:
export interface IProps {
id: number;
name: string;
image: string;
}
Currently, my list of ingredients is structured like this:
const List = (props: { ingredient: IProps }) => {
const { ingredient } = props;
return (
<Container>
<Box>
<Image src={ingredient.image} alt={ingredient.name} />
<Box>
{ingredient.name}
</Box>
</Box>
</Container>
);
};
export default List;
I have omitted all styling information above.
The props are passed from where I make the call:
const Search = () => {
const [ingredients, setIngredients] = useState<IProps[]>([]);
const [value, setValue] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
axios
.get(
`https://api.spoonacular.com/food/ingredients/search?query=${value}&number=2&apiKey=${URL}`
)
.then((res) => res.data)
.then((data) => data.results)
.then((data) => setData(data))
.catch((err) => console.log(err));
};
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<Flex justifyContent="center">
<Flex direction="column">
<Heading mb={6}>Search Recipe</Heading>
<Input
onChange={handleChange}
value={value}
name="search"
id="search"
placeholder="Write here..."
variant="filled"
mb={2}
type="text"
/>
<Button onClick={handleSubmit} mb={5}>
Search
</Button>
</Flex>
{ingredients.map((ingredient) => (
<List key={ingredient.id} ingredient={ingredient} />
))}
</Flex>
);
};
export default Search;
However, I am puzzled by the fact that I receive a 404 error for the image:
Request URL: http://localhost:3000/lemon.png
Request Method: GET
Status Code: 404 Not Found
Remote Address: 000.0.0.0:0000
Referrer Policy: strict-origin-when-cross-origin
As I am new to TypeScript, I may have overlooked something fundamental?