The path of my image is being changed in React

Here is the code I use to get the favorite products of the user

import React, { useEffect, useState } from "react";
import { Pagination, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { getProductToWishlist } from "../../RTK/Slices/wishlistSlice";
import CardProductCountainer from "../products/CardProductCountainer";
import ProductCard from "../products/ProductCard";
const UserFavoriteProduct = () => {
const dispatch = useDispatch();
const [loading, setLoading] = useState(true);
const [items, setItems] = useState([]);
useEffect(() => {
const get = async () => {
setLoading(true);
await dispatch(getProductToWishlist());
setLoading(false);
};
get();
}, []);
const res = useSelector((state) => state.wishlistSlice.allWishList);
useEffect(() => {
if (loading === false) {
if (res) {
setItems(
res.data.map((item) => {
const { id, imageCover, images } = item;
return {
...item,
images: {
[id]: {
cover: imageCover,
others: images,
},
},
};
})
);
}
}
}, [loading]);
return (
<div>
<div className="admin-content-text pb-4">قائمة المفضلة</div>
<Row className="justify-content-start">
{items.length <= 0 ? (
<h6>لا يوجد منتجات مفضله حاليا</h6>
) : (
<CardProductCountainer products={items} title="" btntitle="" />
)}
</Row>
<Pagination />
</div>
);
};
export default UserFavoriteProduct;

The path of img is supposed to look like this:

"imageCover": "http://127.0.0.1:8000/products/products-8bad93c1-19eb-4011-9dc6-dc3f704ed83c-1685630224582-cover.jpeg",
"images": [
"http://127.0.0.1:8000/products/products-34218803-805d-4eb4-98c8-ada648f98fa8-1685630224597-1.jpeg"
],

But instead it looks like this:

"imageCover": "products-33d97001-a069-492a-bd36-de7d102a92d0-1683282946006-cover.jpeg",
"images": [
"products-fe7577fa-2c26-42cb-a46b-9666169c432a-1683282946231-2.jpeg",
"products-4f4c53e1-9bc4-4433-bec7-61d37f18e3f7-1683282946230-1.jpeg"
],

Without http://127.0.0.1:8000,Wwhat can I do to fix this?

Here is the CardProductCountainer component:

import React, { useEffect, useState } from "react";
import { Container, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { getProductToWishlist } from "../../RTK/Slices/wishlistSlice";
import SubTitle from "../utilitys/SubTitle";
import ProductCard from "./ProductCard";
const CardProductCountainer = ({ title, btntitle, pathText, products }) => {
const dispatch = useDispatch();
const [loading, setLoading] = useState(true);
const [favProd, setFavProd] = useState([]);
const res = useSelector((state) => state.wishlistSlice.allWishList);
useEffect(() => {
const get = async () => {
setLoading(true);
await dispatch(getProductToWishlist());
setLoading(false);
};
get();
}, []);
useEffect(() => {
if (loading === false) {
if (res.data.length >= 1) {
console.log(res);
setFavProd(res.data.map((item) => item._id));
} else setFavProd([]);
}
}, [loading]);
return (
<Container>
{products ? (
<SubTitle title={title} btntitle={btntitle} pathText={pathText} />
) : null}
<Row className="my-2 d-flex justify-content-between">
{products
? products.map((item, index) => (
<ProductCard favProd={favProd} key={index} item={item} />
))
: null}
</Row>
</Container>
);
};
export default CardProductCountainer;

And here is the ProductCard component:

import React, { useEffect, useState } from "react";
import { Card, Col } from "react-bootstrap";
import prod1 from "../../images/prod1.png";
import favoff from "../../images/fav-off.png";
import favon from "../../images/fav-on.png";
import rate from "../../images/rate.png";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
addProductToWishlist,
removeProductToWishlist,
} from "../../RTK/Slices/wishlistSlice";
import { ToastContainer } from "react-toastify";
import notify from "../../customHook/useNotification";
const ProductCard = ({ item, favProd }) => {
const dispatch = useDispatch();
const [favImg, setFavImg] = useState(favoff);
let Fav = favProd.some((fitem) => fitem === item._id);
const [loadingAdd, setLoadingAdd] = useState(true);
const [loadingRemove, setLoadingRemove] = useState(true);
const [isFav, setIsFav] = useState(Fav);
useEffect(() => {
setIsFav(favProd.some((fitem) => fitem === item._id));
}, [favProd]);
const handelFav = () => {
if (isFav) {
removeToWishListData();
} else {
addToWishListData();
}
};
useEffect(() => {
if (isFav === true) {
setFavImg(favon);
} else {
setFavImg(favoff);
}
}, [isFav]);
const resAdd = useSelector((state) => state.wishlistSlice.addWishlist);
const resRemove = useSelector((state) => state.wishlistSlice.removeWishlist);
const addToWishListData = async () => {
setIsFav(true);
setFavImg(favon);
setLoadingAdd(true);
await dispatch(
addProductToWishlist({
productId: item._id,
})
);
setLoadingAdd(false);
};
const removeToWishListData = async () => {
setIsFav(false);
setFavImg(favoff);
setLoadingRemove(true);
await dispatch(removeProductToWishlist(item._id));
setLoadingRemove(false);
};
useEffect(() => {
if (loadingAdd === false) {
if (resAdd && resAdd.status === 200) {
notify("تمت اضافة المنتج للمفضلة بنجاح", "success");
} else if (resAdd && resAdd.status === 401) {
notify("انت غير مسجل", "error");
}
}
}, [loadingAdd]);
useEffect(() => {
if (loadingRemove === false) {
if (resRemove && resRemove.status === "success") {
notify("تمت حذف المنتج من المفضلة بنجاح", "warn");
} else if (resAdd && resAdd.status === 401) {
notify("انت غير مسجل", "error");
}
}
}, [loadingRemove]);
return (
<Col xs="6" sm="6" md="4" lg="3" className="d-flex">
<Card
className="my-2"
style={{
width: "100%",
height: "345px",
borderRadius: "8px",
border: "none",
backgroundColor: "#FFFFFF",
boxShadow: "0 2px 2px 0 rgba(151,151,151,0.5)",
}}
>
<Link to={`/products/${item._id}`} state={{ textDecoration: "none" }}>
<Card.Img
style={{ height: "228px", width: "100%" }}
src={item.imageCover}
/>
</Link>
<div className="d-flex justify-content-end mx-2">
<img
src={favImg}
onClick={handelFav}
alt=""
className="text-center"
style={{
height: "24px",
width: "26px",
cursor: "pointer",
}}
/>
</div>
<Card.Body>
<Card.Title>
<div className="card-title">{item.title}</div>
</Card.Title>
<Card.Text>
<div className="d-flex justify-content-between ">
<div className="d-flex">
<img
className=""
src={rate}
alt=""
height="16px"
width="16px"
/>
<div className="card-rate mx-2">{item.ratingsAverage || 0}</div>
</div>
<div className="d-flex">
<div className="card-price">{item.price}</div>
<div className="card-currency mx-1">جنيه</div>
</div>
</div>
</Card.Text>
</Card.Body>
</Card>
<ToastContainer />
</Col>
);
};
export default ProductCard;

> Hi, there 👋
> First of all welcome to stack overflow, if you want to get good
> response here make sure to make your question good. Keep it detailed
> as above but avoid typos and check for grammatical errors.

Anyways here is how you can solve the above problem. for further questions comment on the answer. And follow the steps to solve the problem.

1. Declear a constant holding your site url.

Example:

const URL = "127.0.0.1:8000";

2. Append the URL before using the image source.

Example:

<Card.Img
style={{ height: "228px", width: "100%" }}
src={ URL + item.imageCover }
/>

I hope this helps. If so give it a upvote. And make sure to Improve your question look through this link to see how you can ask better questions.

Thank you ☺️

PS. Edit
Those who are unsure about the above problem the problem is now solved and was caused by the data that was coming out of the server. Anyways the solution in this answer also works equally as well.