I'm facing an issue with setting a custom background image for the select element in React using CSS. Here is the directory structure I am working with:
/src
|- globals.scss
|- /images
|- caret.png
|- /components
|- /Login
|- container.js
|- style.scss
|- ui.js
The container.js file renders ui.js, which imports ./style.scss. The style.scss file starts with @import /src/globals.scss;. Everything works fine so far, but my problem arises when I try to change the icon for select boxes using a background image. The CSS code responsible for this is located in the globals.scss file and looks like this:
select {
outline: none;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 23px;
background: url("caret.png") no-repeat right 5px center;
background-size: 13px 8px;
height: 40px;
border: 1px solid #e6e6e6;
padding-left: 5px;
background-color: #fff;
}
select::-ms-expand {
display: none;
}
However, I encounter the following error message:
./src/components/Login/caret.png
Module build failed: Error: ENOENT: no such file or directory, open 'C:\[...]\src\components\Login\caret.png'
To resolve this issue, I added the missing image file into the "Login" folder, which temporarily solved the problem. But duplicating the image in every component where I want to use it is not an ideal solution. I attempted to modify the path in the CSS to
background: url("/src/images/caret.png") no-repeat right 5px center;How can I address this issue effectively without resorting to copying the image file in multiple components? Additionally, I am uncertain about how the webpack configuration functions as I did not set it up myself for this project.
In a related test, I successfully changed the URL to be the base64 encoded version of the image. However, I prefer a solution that does not require converting every image to base64, especially if similar changes are needed in the future. Furthermore, I am unsure about the compatibility of base64 images across different browsers, and aim to ensure cross-browser support as much as possible.