While working on a project initialized with Create React App, in the public folder there is an assets directory containing a file named logo512.jpg.
When I use this file in a component like so:
<div>
<img src='/assets/logo512.jpg'/>
</div>
Everything functions correctly. But when I try to reference the same file in a CSS file for the identical component like this:
background {
background-image: url('assets/logo512.jpg');
}
I encounter the error message
Can't resolve '/assets/logo512.jpg' in DIRECTORY_OF_COMPONENT/assets/logo512.jpgPlease note that DIRECTORY_OF_COMPONENT refers to the folder where the CSS file is located, not the public folder. How can I adjust the URL to point to the public folder instead?
Below you'll find the complete code snippet along with my file structure:
// HomePage.js
import React from 'react';
import 'tachyons';
import './HomePage.css';
function HomePage() {
return (
<div className="background tc">
<div>
<img src='/assets/logo512.jpg'/> //this works
</div>
</div>
);
}
export default HomePage;
// HomePage.css
.background {
height: 100%;
display: flex;
align-content: center;
justify-content: center;
background: url('/assets/logo512.jpg'); //this does not work
}