I am currently working on an app that utilizes React and Typescript.
To retrieve data, I am integrating a free API. My goal is to incorporate a default image for objects that lack images.
Here is the project structure:
https://i.stack.imgur.com/xfIYD.png
Within movies.service.tsx, I am fetching the data and assigning the value retrieved from the DB to the picture property of the movie object. If there is no value present, I intend to assign it the path leading to default-poster.png:
import * as img from '../images/default-poster.png';
console.log('img ', img);
const movieApiBaseUrl = "https://api.themoviedb.org/3";
const posterBaseUrl = "https://image.tmdb.org/t/p/w300";
export interface Movie {
id: number;
title: string;
rating: number;
description: string;
picture?: string;
date: string;
}
export function fetchMovies(): Promise<Movie[]> {
return fetch(
`${movieApiBaseUrl}/discover/movie?sort_by=year.desc&api_key=${process.env.REACT_APP_API_KEY}`
)
.then((res) => res.json())
.then((res) => mapResult(res.results))
.catch(() => {
return [];
});
}
// = movie has to be after const {} here
function mapResult(res: any[]): Movie[] {
return res.map((movie) => {
const {
id,
title,
vote_average,
overview,
poster_path,
date,
} = movie;
return {
id: id,
title: title,
rating: vote_average,
description: overview,
picture: poster_path ? `${posterBaseUrl}${poster_path}` : img,
date: date,
};
});
}
However, I encountered an issue when trying to assign img to the picture property in Typescript. Upon console logging the img value, I discovered that it represents a module:
Module default: "data:image/png;base64,iVBORw0KGgoAAAA <...>" Symbol(Symbol.toStringTag): "Module" esModule: true __proto: Object
In order to utilize these paths in the MovieCards.tsx component in the future, I must find a solution to properly assign them to the picture property.
What steps should I take to address this challenge?
Your assistance is greatly appreciated!