add mediaURl to src path

build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.c25a228f.css",
-    "main.js": "/static/js/main.1ee924cb.js",
+    "main.js": "/static/js/main.f6af32da.js",
     "static/js/787.884e199e.chunk.js": "/static/js/787.884e199e.chunk.js",
     "static/media/main-page-image.png": "/static/media/main-page-image.bc655052ce386c031a15.png",
     "static/media/default-avatar-image.png": "/static/media/default-avatar-image.fb653606e5a348e7bc76.png",
@@ -9,11 +9,11 @@
     "static/media/shopping-logo.svg": "/static/media/shopping-logo.423022a24e67b6b6140c294be23af1b0.svg",
     "index.html": "/index.html",
     "main.c25a228f.css.map": "/static/css/main.c25a228f.css.map",
-    "main.1ee924cb.js.map": "/static/js/main.1ee924cb.js.map",
+    "main.f6af32da.js.map": "/static/js/main.f6af32da.js.map",
     "787.884e199e.chunk.js.map": "/static/js/787.884e199e.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.c25a228f.css",
-    "static/js/main.1ee924cb.js"
+    "static/js/main.f6af32da.js"
   ]
 }

src/components/CartPage/CartItem.js

@@ -5,7 +5,7 @@ import { AiOutlinePlus, AiOutlineMinus } from "react-icons/ai";
 import { actionCartChange } from "../../reducers";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { backendURL } from "../../helpers";
+import { backendURL, mediaURL } from "../../helpers";
 
 const { Typography, Stack, IconButton, TextField, ButtonGroup, Button, TableCell, TableRow, Input } = require("@mui/material");
 
@@ -35,7 +35,7 @@ export const CartItem = ({ order, onDeleteClick }) => {
             <TableCell>
                 <Box
                     component="img"
-                    src={images && images[0]?.url ? `${backendURL}/${images ? images[0]?.url : ""}` : defaultGoodImage}
+                    src={images && images[0]?.url ? `${backendURL}${mediaURL}${images ? images[0]?.url : ""}` : defaultGoodImage}
                     sx={{ width: 50 }}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null;

src/components/DashboardPage/DashboardOrder/DashboardOrderGood/index.js

@@ -1,5 +1,5 @@
 import { Box, Grid, Typography } from "@mui/material";
-import { backendURL } from "../../../../helpers";
+import { backendURL, mediaURL } from "../../../../helpers";
 import defaultGoodImage from "../../../../images/default-good-image.png";
 
 export const DashboardOrderGood = ({ orderGood }) => {
@@ -8,7 +8,10 @@ export const DashboardOrderGood = ({ orderGood }) => {
         <Box className="DashboardOrderGood">
             <Grid container spacing={4}>
                 <Grid item xs={2}>
-                    <Box component="img" src={good?.images[0]?.url ? `${backendURL}/${good?.images[0]?.url}` : defaultGoodImage} />
+                    <Box
+                        component="img"
+                        src={good?.images[0]?.url ? `${backendURL}${mediaURL}${good?.images[0]?.url}` : defaultGoodImage}
+                    />
                 </Grid>
                 <Grid item xs={10}>
                     <Typography textAlign="left">Назва: {good?.name || "-"}</Typography>

src/components/GoodPage/index.js

@@ -4,7 +4,7 @@ import defaultGoodImage from "../../images/default-good-image.png";
 import { Divider, Grid, Stack, Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import { Carousel } from "react-responsive-carousel";
-import { backendURL } from "../../helpers";
+import { backendURL, mediaURL } from "../../helpers";
 
 export const GoodPage = () => {
     const good = useSelector((state) => state.promise?.goodById?.payload || {});
@@ -17,7 +17,7 @@ export const GoodPage = () => {
                         {(good.images || [{ _id: 0, url: defaultGoodImage }]).map((image) => (
                             <img
                                 key={image?._id}
-                                src={image?.url ? `${backendURL}/${image?.url}` : defaultGoodImage}
+                                src={image?.url ? `${backendURL}${mediaURL}${image?.url}` : defaultGoodImage}
                                 onError={({ currentTarget }) => {
                                     currentTarget.onerror = null; // prevents looping
                                     currentTarget.src = defaultGoodImage;

src/components/admin/AdminGoodsPage/AdminGoodItem.js

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import defaultGoodImage from "../../../images/default-good-image.png";
 import { Box, Button, TableCell, TableRow } from "@mui/material";
-import { backendURL } from "../../../helpers";
+import { backendURL, mediaURL } from "../../../helpers";
 
 const AdminGoodItem = ({ good }) => (
     <TableRow className="AdminGoodItem">
@@ -11,7 +11,7 @@ const AdminGoodItem = ({ good }) => (
             {
                 <Box
                     component="img"
-                    src={good.images?.length ? `${backendURL}/${good.images ? good.images[0]?.url : ""}` : defaultGoodImage}
+                    src={good.images?.length ? `${backendURL}${mediaURL}${good.images ? good.images[0]?.url : ""}` : defaultGoodImage}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null; // prevents looping
                         currentTarget.src = defaultGoodImage;

src/components/common/Ava/index.js

@@ -1,8 +1,9 @@
 import { Avatar } from "@mui/material";
 import { useSelector } from "react-redux";
+import { backendURL, mediaURL } from "../../../helpers";
 import defaultAvatarImage from "../../../images/default-avatar-image.png";
 
 export const Ava = () => {
     const path = useSelector((state) => state.promise.aboutMe?.payload?.avatar?.url || null);
-    return <Avatar src={path ? `/${path}` : defaultAvatarImage} />;
+    return <Avatar src={path ? `${backendURL}${mediaURL}${path}` : defaultAvatarImage} />;
 };

src/components/common/DrawerCart/DrawerCartItem.js

@@ -3,6 +3,7 @@ import defaultGoodImage from "../../../images/default-good-image.png";
 import { IoCloseOutline } from "react-icons/io5";
 
 import { Typography, IconButton, Card, CardMedia, CardContent } from "@mui/material";
+import { backendURL, mediaURL } from "../../../helpers";
 
 const DrawerCartItem = ({ order, onDeleteClick }) => {
     const {
@@ -14,7 +15,7 @@ const DrawerCartItem = ({ order, onDeleteClick }) => {
             <CardMedia
                 component="img"
                 sx={{ width: 90 }}
-                src={images && images[0]?.url ? `/${images ? images[0]?.url : ""}` : defaultGoodImage}
+                src={images && images[0]?.url ? `${backendURL}${mediaURL}${images ? images[0]?.url : ""}` : defaultGoodImage}
                 onError={({ currentTarget }) => {
                     currentTarget.onerror = null; // prevents looping
                     currentTarget.src = defaultGoodImage;

src/components/common/EntityEditor/index.js

@@ -5,7 +5,7 @@ import { SortableList } from "./SortableList";
 import { SortableItem } from "./SortableItem";
 import { Box, Button, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from "@mui/material";
 import { MdClose } from "react-icons/md";
-import { backendURL } from "../../../helpers";
+import { backendURL, mediaURL } from "../../../helpers";
 
 export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uploadFiles, onImagesSave }) => {
     const [state, setState] = useState(entity);
@@ -58,7 +58,7 @@ export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uplo
                                             <Box
                                                 component="img"
                                                 className="DropZoneImage"
-                                                src={`${backendURL}${image.url}`}
+                                                src={`${backendURL}${mediaURL}${image.url}`}
                                                 loading="lazy"
                                             />
                                         </ImageListItem>

src/components/common/GoodCard/index.js

@@ -1,6 +1,7 @@
 import { Card, CardActionArea, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { backendURL, mediaURL } from "../../../helpers";
 import defaultGoodImage from "../../../images/default-good-image.png";
 import { actionCartAdd } from "../../../reducers";
 import { CBuyButton } from "../BuyButton";
@@ -12,7 +13,7 @@ const GoodCard = ({ good = {} }) => {
                 <CardMedia
                     component="img"
                     height="200"
-                    image={`/${good.images ? good.images[0]?.url : defaultGoodImage}`}
+                    image={`${backendURL}${mediaURL}${good.images ? good.images[0]?.url : defaultGoodImage}`}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null;
                         currentTarget.src = defaultGoodImage;

src/components/common/SearchBar/SearchGoodResultItem.js

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import defaultGoodImage from "../../../images/default-good-image.png";
 
 import { Grid, Box, Typography } from "@mui/material";
-import { backendURL } from "../../../helpers";
+import { backendURL, mediaURL } from "../../../helpers";
 const SearchGoodResultItem = ({ good, onClick, link = "" } = {}) => {
     const { _id = 0, images = [], name = "", description = "", price = "" } = good || {};
 
@@ -18,7 +18,7 @@ const SearchGoodResultItem = ({ good, onClick, link = "" } = {}) => {
             <Grid item xs={3}>
                 <Box
                     component="img"
-                    src={images ? `${backendURL}/${images[0]?.url}` : defaultGoodImage}
+                    src={images ? `${backendURL}${mediaURL}${images[0]?.url}` : defaultGoodImage}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null; // prevents looping
                         currentTarget.src = defaultGoodImage;

src/helpers/index.js

@@ -6,4 +6,5 @@ import { statusNumber, statusOptions } from "./orderStatus";
 
 export const backendURL = "http://188.72.209.29/api";
 export const gql = getGQL(backendURL + "/graphql/");
+export const mediaURL = "/media/";
 export { jwtDecode, delay, statusNumber, statusOptions };