Images not displaying in the react.js - reactjs

Question

I am trying to render the images in React.js as a card content but it does not show the image.
The code to display image:
const Template = ({ template }) => {
console.log(template.preview_image) // <- It displays the image path
return (
<Card className="my-3 p-3 rounded">
<Link to={`/template/${template._id}`}>
<Card.Img src={template.preview_image} variant="top" />
</Link>
<Card.Body>
<Link to={`/template/${template._id}`}>
<Card.Title as="div">
<strong>{template.name}</strong>
</Card.Title>
</Link>
</Card.Body>
</Card>
);
};
The template prop coming from the following code:
{loading ? (
<Loader />
) : error ? (
<Message variant="danger">{error}</Message>
) : (
<Row>
{templates &&
templates.map((template) => (
<Col key={template._id} sm={12} md={6} lg={4} xl={3}>
<Template template={template} />
</Col>
))}
</Row>
)}
The useEffect function:
const templateList = useSelector((state) => state.templateList);
const { error, loading, templates } = templateList;
useEffect(() => {
dispatch(listTemplates());
}, [dispatch]);
The images are also saved at the server side in the uploads folder.
Am I missing something?