Last active
January 18, 2023 05:57
-
-
Save librz/68c2d3ab02d2a7fb44e0595c17bc7265 to your computer and use it in GitHub Desktop.
Preload images(e.g. logo & background image) in Create React App
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { FC } from "react"; | |
| const Home: FC = () => { | |
| return ( | |
| <div> | |
| <header> | |
| <img src="/images/site-logo.svg" alt="logo" /> | |
| </header> | |
| <main | |
| style={{ | |
| backgroundImage: `url(${process.env.PUBLIC_URL + "/images/homepage-bg.svg"})` | |
| // note you must add process.env.PUBLIC_URL, otherwise it won't work | |
| // you cannot do: import HomepageBg from '/public/images/homepage-bg.svg' as create-react-app only supports import resources that are under src folder | |
| // you cannot set the background inside css file as the generated background filename will be hashed, thus cannot be referenced in public/index.html | |
| }} | |
| > | |
| Yo, what's up? | |
| </main> | |
| </div> | |
| ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="icon" href="%PUBLIC_URL%/favicon.png" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="version" content="%REACT_APP_VERSION%" /> | |
| <link rel="preload" as="image" href="%PUBLIC_URL%/images/homepage-bg.svg" /> | |
| <link rel="preload" as="image" href="%PUBLIC_URL%/images/site-logo.svg" /> | |
| <title>Hi</title> | |
| </head> | |
| <body> | |
| <noscript>You need to enable JavaScript to run this app.</noscript> | |
| <div id="root"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment