0

I am trying to add image inside the Pseudo element selector 'before' on content property using 'url()', in HTML and CSS it is working fine but when I added the HTML inside react(JSX) and attached the CSS file, I am getting error as below


    Failed to compile
    
    ./src/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/style.css)
    Module not found: Can't resolve './ascending-sort.png' in 'D:\JAVA\Prog\My Projects\Sort Visualizer\sort-visualizer\src'

CSS code

.navbar__header::before {
    position: absolute;
    content: url("ascending-sort.png");
    left: -40px;
    top: -5px;
}

JSX

 <div className="navbar__header">Sort Visualizer</div>

Is there any different way to deal with Pseudo element selectors in react.

Siddhesh
  • 73
  • 1
  • 7
  • The error seems to tell you it cannot find the `ascending-sort.png` file... I guess it is somewhere like in `/public`. So just check the path to the image. – Louys Patrice Bessette Apr 03 '21 at 15:43
  • @LouysPatriceBessette I have checked the path it is correct, i.e. the image `ascending-sort.png` is present inside the public folder, is there any way to provide path because I tried using this `./public/ascending-sort.png` but got same error. – Siddhesh Apr 03 '21 at 16:19
  • I am not sure if the path in the `url()` should be from the root of your app or from the file it tries to compile... So possibilities are `/public/ascending-sort.png` or `../public/ascending-sort.png` – Louys Patrice Bessette Apr 03 '21 at 16:28
  • @LouysPatriceBessette I tried both of them but didn't work. – Siddhesh Apr 04 '21 at 08:49
  • I found a similar question [Reference file in public folder from CSS in create-react-app](https://stackoverflow.com/questions/48841775/reference-file-in-public-folder-from-css-in-create-react-app) So seems you just need a `/` in front of the filename... Did you try that? – Louys Patrice Bessette Apr 04 '21 at 15:35

0 Answers0