1

Edited: codesandbox link here.

I followed this instruction to display loading status before the page is fully rendered. The concept is that, <div id="root" class="loader"></div> will stay empty until app is rendered into it. So I can use css psuedo-class .loading:empty to display css before app renders, and content will disappear after app is rendered (the div is no longer empty).

    .loader:empty {
      position: absolute;
      top: calc(50% - 4em);
      left: calc(50% - 4em);
      width: 6em;
      height: 6em;
      background-color: red;
    }
    <div id="root" class="loader"></div>

It's was alright when I followed the instruction; however, when I was trying to use local images by background-image: url(./src/images/image.svg);, the image couldn't be displayed. Instead, I was able to use hyperlinks from Unsplash or Picsum

Workable:

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  background-image: url(https://picsum.photos/200);
}

Not workable:

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  background-image: url(./src/images/image.svg);
}

Is there any ways to use image in CSS?

By the way, I've also tried the second method which is add another div and a image tag in index.html and use hooks to remove it after mounted. It works fine at first, but not in the routed page. I have multiple pages so I have to copy and paste every useEffect and useState hook at each of my router which is quite annoying.

Petervsjim
  • 11
  • 2
  • Did you try putting `image.svg` inside `public` folder and doing this `background-image: url("/image.svg")`? – Youssouf Oumar Jul 01 '22 at 15:10
  • @yousoumar Yes, I've tried to put the image in the public folder and it did not work as well. I guess the problem is due to the react local files import restriction. – Petervsjim Jul 01 '22 at 15:16
  • Did you put `image.svg` as a single file without the folder `images` inside `public` folder and add this `background-image: url("/image.svg")`? It seems to be a path issue, since the one from Unsplash is working. – Youssouf Oumar Jul 01 '22 at 15:19
  • @yousoumar Yes, I also related to this post https://stackoverflow.com/questions/44796786/how-to-set-a-background-image-in-reactjs saying the same thing, I tried put the `image.svg` under different folders including `public`, but it didn't show up for some unknown reasons. I inspect the page while loading, and the inspector was able to get the image, but again nothing was shown up. – Petervsjim Jul 01 '22 at 15:31
  • I see. Can you use this Codesandbox [link](https://codesandbox.io/s/new?file=/src/App.js) to reproduce what you have locally? – Youssouf Oumar Jul 01 '22 at 15:44
  • @yousoumar I can't show my gratefulness anymore. Thanks for your kind replies. I've put my entier repo to the [codesandbox](https://codesandbox.io/s/sad-haibt-wvkdwt?file=/loader.css) , you can relate to `/index.html` and `/loader.css` especially the after one. I've listed methods I've tried there. – Petervsjim Jul 01 '22 at 16:06
  • My pleasure @Petervsjim. I see that you are using `Vite`. Well those specifications about images I'm talking about are for `create-react-app`, which uses `Webpack`. And sadly I don't have enough knowledge about `Vite` and `@vitejs/plugin-react`. I will let others respond. – Youssouf Oumar Jul 01 '22 at 16:43

0 Answers0