React-Bootstrap dynamic Image rendering - image

Question

I am trying to display profile pic by calling the path and file name from database
Profile Image is not loading is it the path?
using json server local test.
Image is saved in folder ../src/image/
json data
image: "..image/pic.jpg"
import { Card, ListGroup } from "react-bootstrap";
import { useParams, useHistory } from "react-router-dom";
import useFetch from "./useFetch";
const MemberProfile = () => {
const { id } = useParams();
const {
data: member,
error,
isLoading,
} = useFetch("http://192.168.0.23:8000/members/" + id);
const history = useHistory();
const handleClick = () => {
fetch("http://192.168.0.23:8000/members/" + member.id, {
method: "DELETE",
}).then(() => {
history.push("/");
});
};
return (
<div className="memberProfile">
{isLoading && <div>Loading...</div>}
{error && <div>{error}</div>}
{member && (
<Card style={{}}>
<Card.Img variant="top" src={member.image} />
<Card.Body>
<Card.Title>
<h2>
<strong>
Profile - {member.name} {id}
</strong>
</h2>
</Card.Title>
<Card.Text>
<pre className="acordnBody">
Gender : {member.gender} <hr />
Phone : {member.tel} <hr />
E-mail : {member.email} <hr />
Address : {member.address}
</pre>
</Card.Text>
</Card.Body>
</Card>
)}
</div>
);
};
export default MemberProfile;