2

I have an issue that, on refresh, some of the media disappear (bg image + logo). The backgroud image is inherited from HTML and the logo from the Navbar component.

This link is on a category and is working fine on refresh.

https://alphamedical.netlify.app/ATI

If you click on an item from that category and after that you refresh, the bg and logo disappear. https://alphamedical.netlify.app/ATI/HAMILTON-C1

For example link above.

I think it may be related with react router.

My App routes

function App() {
const customHistory = createBrowserHistory();
return (
<Router history={customHistory}>
               <div>
                    <Navbar />
                    <Routes>
                         <Route path="/" exact element={<Home />} />
                         <Route path="/:title" element={<ProductList />} />
                         <Route path="/:title/:product" element={<ProductPage />} />
                    </Routes>
               </div>
          </Router>
     );
}

HTML Code where the background image is:

     </head>
     <style>
          html {
               scroll-behavior: smooth;
               overflow: scroll;
               overflow-x: hidden;
               background: url(images/gradient.jpg) no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
               background-size: cover;
          }
     </style>
     <body class="text-white" style="font-family: 'Inter', sans-serif; font-weight: 500">
          <div id="root"></div>
     </body>
</html>
Chris
  • 55
  • 3

3 Answers3

1

For https://alphamedical.netlify.app/ATI the style can find the background image path properly. But for https://alphamedical.netlify.app/ATI/HAMILTON-C1 the background image path is wrong. It needs

background: URL(../images/gradient.jpg) no-repeat center center fixed;

instead of

background: url(images/gradient.jpg) no-repeat center center fixed;

Solution: create a stylesheet file. and import it on your App.jsx file

Chinmay Dey
  • 134
  • 4
  • 1
    Let me know if it not working. – Chinmay Dey Nov 26 '21 at 10:31
  • Well, I moved the code into a CSS File and imported in App but the logo from the navbar component is still disappearing on refresh. How can I resolve that? – Chris Nov 26 '21 at 15:54
  • Well, based on your answer, I figured it out that uploading the images on a hosting website and just paste in the links as SRC instead of path from files made it work but I am not sure if is the best practice. – Chris Nov 26 '21 at 16:02
1

Make sure your media path always match when you are getting routed.

Damian
  • 97
  • 7
0

I had tag with src="logo.png", and when i route on any page (path="*").my image is checked to alt name...so I just change my src like src="/logo.png", and it works

shoxer petrosyan
  • 1