Search code examples
reactjssassreact-static

How to set url for images in react-static build in scss file

I'm migrating my React site to react-static. I have a css in scss files and I use react-static-plugin-sass in my project. How do I set correctly an URL for images in my scss files?

I tried this:

.my-page {
  color: rgb(70, 81, 116);
  &_header {
    border: 1px solid #000;
    background-image: url(/assets/images/bg-illustration.jpg);
  }
}

but when I run the site it gives me the following error:

Cannot GET /assets/images/bg-illustration.jpg

My assets are located in src folder:

-src
--assets
---images
----bg-illustration.jpg

It seems that all images that are mentioned in scss files are just not copied to the result folder with assets.

I'd appreciate any info about how I can fix it in react-static build.

Solution

  • As mentioned in the comment by Eusbolh, you need to use relative path for the URL. E.g:

    background-image: url(../../assets/images/test.png);

    Note that when we start a path with /, e.g. /foo/bar.png, it tries to read the image from public directory.