My api is fetching an image but i cant seem to display it into ReactJs.

The api :

[
    {
        "id": 1,
        "vessel_component_count": 3,
        "vessel_inventory_category_count": 0,
        "name": "Aylah",
        "imo": "Aylah123",
        "image": "/media/vessel_image/aylah.jpg"
    },
    {
        "id": 2,
        "vessel_component_count": 1,
        "vessel_inventory_category_count": 0,
        "name": "Sinaa",
        "imo": "sinaa123",
        "image": null
    },
    {
        "id": 3,
        "vessel_component_count": 0,
        "vessel_inventory_category_count": 0,
        "name": "Amman",
        "imo": "amman123",
        "image": "/media/vessel_image/amman.jpg"
    }
]

the code in react

parent component Homescreen.js :

function HomeScreen() {
  const [vessels, setVessels] = useState([]);
  useEffect(() => {
    async function fetchVessels() {
      const { data } = await axios.get(
        "http://127.0.0.1:8000/api/vessels/info"
      );
      setVessels(data);
    }
    fetchVessels();
  }, []);
  return (
    <div>
      Fleet vessels :
      <div className="fleet-vessels-info">
        {vessels.map((vessel) => (
          <VesselCard vessel={vessel} />
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

the child component VesselCard.js :

function VesselCard({ vessel }) {
  return (
    <div className="fleet-vessel-card">
      {vessel.name}
      <img src={vessel.image} />
    </div>
  );
}

export default VesselCard;

getting everything else like the name and imo is working fine except the image.