score:27
just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.app-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in cra webpack will bundle the css and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %public_url%/styles.css
macro)
score:0
remove the extra ..
in the relative path. :)
score:0
use "./image.png"
.
the logic behind is that the css
file you will place the code in, will be part of index.html
when the app is finished, built and deployed.
score:0
the only way that helped me is adding full url-adress to the image path. so this one can help:
background-image: url("http://localhost:3000/background.jpg");
score:0
background-image: url("http:/images/pexels-photo-1.jpg");
score:1
there is a special page about the /public
folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/
here is how you should refer to the public folder:
<link rel="icon" href="%public_url%/favicon.ico" />
or
render() {
return <img src={process.env.public_url + '/img/logo.png'} />;
}
but, you can't use those solution in a css file. so you'll have to precise the ressource from the js files:
const mycomp = () => {
return <div style={{ backgroundimage: `${process.env.public_url}/img/logo.png` }} />;
}
score:1
i was using "public" folder but it says here to use images inside "src" folder:
https://create-react-app.dev/docs/using-the-public-folder/
"normally we recommend importing stylesheets, images, and fonts from javascript."
score:3
in my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. after which i was able to refer them in the css/scss files directly,
background-image: url("/images/background.jpg");
references:
Source: stackoverflow.com
Related Query
- CanĀ“t access my public folder from css file in React App
- Cannot import from public folder in CSS Create React App
- Reference file in public folder from CSS in create-react-app
- Create React App 4.0 cannot resolve image path in public folder
- Create react app - how to copy pdf.worker.js file from pdfjs-dist/build to your project's output folder?
- How to import file from public folder in react application?
- Create react app with i18next - load translations from json file
- How to apply CSS style to HTML file that is inside the public folder of React JS
- create react app and SVG from node modules folder
- How to call function from App.js file inside public folder in React JS
- Could not fetch local JSON file from public folder in React
- import css from public folder to any react component
- How do you access images in the public folder from a css file while using react-router-dom?
- How do I download file from public folder in React using Express
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- Adding path to an image in CSS module from public folder in react
- How to import image into React from public folder through a json file
- is there any way to import file from another parent folder css react js
- How to read json file from my src folder in my react app using webpack-dev-server?
- How to create a React app directly in the current folder
- React path to public folder in css background image
- Fetch local JSON file from public folder ReactJS
- create react app not loading css background images in dev or build
- Javascript: What is eslintcache file and why is always generated in create react app
- create react app Configuration file after build app
- Extract CSS from SCSS and deferred lazy load in React app
- Create PDF file from HTML text React
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to import a file into a react app that uses create react app as raw text?
- Serve files from `.well-known` folder in a React app
More Query from same tag
- Why can't i set my constructor inside a function?
- How to fetch from backend database to display on frontend using react?
- Why my Element is going outside the header element
- How to get values from dynamically created inputs with ReactJS
- How to get user's id from auth0 in React
- How to pass the initial state as props for my Higher Order Component?
- Using onClick to remove item from one array and place in another in React
- ReactJS how to render a component only when scroll down and reach it on the page?
- React onClick custom function
- Redux Reducer won't set boolean object property
- Disable save until all categories are selected
- How do i create duplicates (same keys) in React list?
- Why doesn't spread attributes work with React useState hook
- creating loading spinner in react
- Staying DRY with Async Calls in React Redux Application With Redux Thunk
- Redux state is not working properly in functional components
- How to change MIME type with script in ReactJS
- Using a state used in a header and updating its content based on Route with hooks
- How to get values from Promise in React?
- React hooks. Why doesn't set function change state?
- Cannot read properties of undefined (reading 'up') in styled Material UI
- Trying to change the inner element by using get element and it throws error TypeError: Cannot set property 'innerHTML' of null
- Authorized header rejected in dockerized spring application
- How can I set up the initial route in next.js?
- Set default props for a react Component
- When I turn off the internet connection it's not showing false value from NetInfo.isConnect function
- Fetching an image from express API
- When I click on button to edit my value, the state don't update the input value
- React Hooks: Uncaught TypeError: setData({...}) is not a function
- componentWillRecieveProps method is not working properly: ReactJS