fixed images url

ivaZaiets · Jan 15, 2024 · f6034b2 · f6034b2
1 parent 46ef315
commit f6034b2
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 28 deletions.
diff --git a/src/components/CharactersFilters/CharactersFilters.module.scss b/src/components/CharactersFilters/CharactersFilters.module.scss
@@ -36,15 +36,15 @@
             }
 
             &_item_bg {
-                background-image: url('../../../public/img/checkbox.png');
+                background-image: url('./img/checkbox.png');
                 background-repeat: no-repeat;
                 width: 22px;
                 height: 11px;
                 margin: 5px 10px;
                 position: relative;
 
                 &_checked {
-                    background-image: url('../../../public/img/checkbox-checked.png');
+                    background-image: url('./img/checkbox-checked.png');
                 }
 
                 @include onPhone {
@@ -65,7 +65,7 @@
 
         &_name_field {
             margin: 0 0 60px;
-            background-image: url('../../../public/img/name-field.png');
+            background-image: url('.img/name-field.png');
             background-repeat: no-repeat;
             background-size: 100% 100%;
             width: 350px;
@@ -122,7 +122,7 @@
 
         &_movies {
             margin: 60px 0 15px 0;
-            background-image: url('../../../public/img/select.png');
+            background-image: url('./img/select.png');
             background-repeat: no-repeat;
             background-size: 100%;
             width: 250px;
@@ -151,7 +151,7 @@
         }
 
         &_reset_btn_background {
-            background-image: url('../../../public/img/reset-filters-button.svg');
+            background-image: url('./img/reset-filters-button.svg');
             background-repeat: no-repeat;
             background-size: 100%;
             width: 23%;
@@ -194,7 +194,7 @@
         }
 
         &_mass {
-            background-image: url('../../../public/img/min-max-mass-details.png');
+            background-image: url('./img/min-max-mass-details.png');
             background-repeat: no-repeat;
             background-size: 100%;
             width: 364px;

diff --git a/src/components/CharactersPagination/CharactersPagination.module.scss b/src/components/CharactersPagination/CharactersPagination.module.scss
@@ -18,14 +18,14 @@
     }
 
     &__button_background {
-        background-image: url('../../../public/img/pagination-button.svg');
+        background-image: url('./img/pagination-button.svg');
         background-size: 100%;
         width: 69px;
         height: 44px;
         background-repeat: no-repeat;
 
         &_active {
-            background-image: url('../../../public/img/pagination-button-active.svg');
+            background-image: url('./img/pagination-button-active.svg');
         }
     }
 

diff --git a/src/pages/CharacterPage/CharacterPage.module.scss b/src/pages/CharacterPage/CharacterPage.module.scss
@@ -2,7 +2,7 @@
 @import '../../styles/CharacterPageMixins.scss';
 
 .character {
-    background-image: url('../../../public/img/baby-yoda-background.png');
+    background-image: url('./img/baby-yoda-background.png');
     background-repeat: no-repeat;
     width: 100%;
     background-position: 100% 100%;
@@ -16,7 +16,7 @@
     }
 
     &__background {
-        background-image: url('../../../public/img/character-bg-detail.svg');
+        background-image: url('./img/character-bg-detail.svg');
         background-repeat: no-repeat;
         background-position: 50% 50%;
         background-size: 65%;
@@ -30,14 +30,14 @@
         }
 
         @include onTablet {
-            background-image: url('../../../public/img/character-bg-detail-tablet.svg');
+            background-image: url('./img/character-bg-detail-tablet.svg');
             background-repeat: no-repeat;
             background-position: 50% 50%;
             background-size: 300px;
         }
 
         @include onPhone {
-            background-image: url('../../../public/img/character-bg-detail-mobile.svg');
+            background-image: url('./img/character-bg-detail-mobile.svg');
             background-repeat: no-repeat;
             background-position: 50% 50%;
             background-size: 300px;

diff --git a/src/pages/CharacterPage/CharacterPage.tsx b/src/pages/CharacterPage/CharacterPage.tsx
@@ -46,7 +46,7 @@ export const CharacterPage = () => {
                         <div className={styles.character__center}>
                             <img
                                 className={styles.character__center_image}
-                                src="../../../public/img/character-shadow.svg"
+                                src="./img/character-shadow.svg"
                                 alt="shadow of the character"
                             />
                         </div>

diff --git a/src/pages/CharactersPage/CharactersPage.module.scss b/src/pages/CharactersPage/CharactersPage.module.scss
@@ -10,7 +10,7 @@
     position: relative;
 
     .filters {
-        background-image: url('../../../public/img/filters-detail.svg');
+        background-image: url('./img/filters-detail.svg');
         background-repeat: no-repeat;
         background-position: 50% 70%;
         background-size: 100%;
@@ -22,7 +22,7 @@
 
         @include onTablet {
             width: 450px;
-            background-image: url('../../../public/img/filters-detail-tablet.svg');
+            background-image: url('./img/filters-detail-tablet.svg');
             background-repeat: no-repeat;
             background-position: 50% 90%;
             background-size: 100%;
@@ -55,7 +55,7 @@
         }
 
         &_character {
-            background-image: url('../../../public/img/card.png');
+            background-image: url('./img/card.png');
             background-size: cover;
             width: 180px;
             height: 230px;
@@ -67,7 +67,7 @@
 
             &:hover {
                 transform: translateY(-4%);
-                background-image: url('../../../public/img/card-bg.png');
+                background-image: url('./img/card-bg.png');
             }
 
             &_logo {

diff --git a/src/pages/CharactersPage/CharactersPage.tsx b/src/pages/CharactersPage/CharactersPage.tsx
@@ -72,7 +72,7 @@ export const CharactersPage = () => {
                             >
                                 <img
                                     className={styles.ch_wrapper_character_logo}
-                                    src="../../../public/img/card-logo.svg"
+                                    src="./img/card-logo.svg"
                                     alt="star wars logo"
                                 />
                                 <h1 className={styles.ch_wrapper_character_name}>{character.name}</h1>

diff --git a/src/pages/HomePage/HomePage.module.scss b/src/pages/HomePage/HomePage.module.scss
@@ -8,7 +8,7 @@
     position: relative;
 
     .stars {
-        background-image: url("../../../public/img/stars.svg");
+        background-image: url("./img/stars.svg");
         background-position: 50% 0%;
         width: 48%;
         height: 110vh;
@@ -33,7 +33,7 @@
     }
 
     .detail_top {
-        background-image: url("../../../public/img/detail-top.png");
+        background-image: url("./img/detail-top.png");
         background-repeat: no-repeat;
         background-size: 39%;
         width: 100%;
@@ -43,7 +43,7 @@
         opacity: 0.8;
 
         @include onTablet {
-            background-image: url("../../../public/img/detail-top-tablet.svg");
+            background-image: url("./img/detail-top-tablet.svg");
             background-size: 100%;
             width: 290px;
             height: 350px;
@@ -52,7 +52,7 @@
         }
 
         @include onPhone {
-            background-image: url("../../../public/img/detail-top-mobile.svg");
+            background-image: url("./img/detail-top-mobile.svg");
             background-size: 100%;
             width: 580px;
             height: 300px;
@@ -63,7 +63,7 @@
     }
 
     .content {
-        background-image: url("../../../public/img/detail-background-block.png");
+        background-image: url("./img/detail-background-block.png");
         background-repeat: no-repeat;
         background-position: center;
         background-size: 80%;
@@ -75,7 +75,7 @@
         position: fixed;
 
         @include onTablet {
-            background-image: url('../../../public/img/detail-background-block-tablet.svg');
+            background-image: url('./img/detail-background-block-tablet.svg');
             background-repeat: no-repeat;
             background-position: center;
             width: 100%;
@@ -85,7 +85,7 @@
         }
 
         @include onPhone {
-            background-image: url('../../../public/img/detail-background-block-mobile.svg');
+            background-image: url('./img/detail-background-block-mobile.svg');
             background-repeat: no-repeat;
             width: 320px;
             height: 360px;
@@ -151,7 +151,7 @@
             }
 
             &_btn_background {
-                background-image: url("../../../public/img/btn.svg");
+                background-image: url("./img/btn.svg");
                 background-repeat: no-repeat;
                 background-size: 45%;
                 width: 100%;

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -27,13 +27,13 @@ export const HomePage = () => {
 
                 <img
                     className={styles.content__character}
-                    src="../../../public/img/baby-yoda.png"
+                    src="./img/baby-yoda.png"
                     alt="baby yoda"
                 />
 
                 <img
                     className={styles.character_background}
-                    src="../../../public/img/baby-yoda-background.png"
+                    src="./img/baby-yoda-background.png"
                     alt="baby yoda background"
                 />
             </div>