create react app not loading css background images in dev or build
Solution 1
The issue was purely an issue with CSS in the App.css
file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
Solution 2
My issue was specifically that I did not have background-size: 30px;
defined. Thanks for this.
j_quelly
I’m a Canadian frontend (user experience) engineer with fullstack proficiency working in San Francisco. I specialize in creating delightful, performant, user interfaces and experiences. My excellent product thinking and observations ensure there is no task I cannot handle.
Updated on July 09, 2022Comments
-
j_quelly almost 2 years
I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:
Note: I have omitted some files & folders, if you need more please let me know.
App/ node_modules/ src/ client/ build/ node_modules/ public/ src/ css/ App.css images/ tree.png yeti.png App.jsx server/ package.json Procfile
Here are the steps I take to create this issue:
$ cd src/server && npm run dev
This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.
Note: I load in an image yeti.png and this renders fine.
App.jsx
import React from 'react'; import ReactDOM from 'react-dom'; import './css/App.css'; import yeti from './images/yeti.png'; const Footer = function(props) { return ( <div> <Yeti /> <Trees /> </div> ); }; const Yeti = function(props) { return ( <img src={yeti} className="yeti yeti--xs" alt="Yeti" /> ); }; const Trees = function(props) { return ( <div className="trees"> <div className="trees__tree trees__tree--1"></div> <div className="trees__tree trees__tree--2"></div> </div> ); }; ReactDOM.render( <Footer />, document.getElementById('root') );
App.css
.trees { bottom: 0; height: 110px; left: 0; position: fixed; width: 100%; z-index: 1; } .trees__tree { background-size: 30px; background: url('../images/tree.png') no-repeat; float: left; height: 50px; width: 30px; } .trees__tree--1 { margin: 0 0 0 6%; } .trees__tree--2 { margin: 2% 0 0 4%; }
When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.
Note that the path for the image I import is similar to the path for the background image:
If I were to import the
tree.png
asimport tree from './images/tree.png';
and change my two<div>
elements to<img src={tree} role="presentation" className="trees__tree trees__tree--1" />
and<img src={tree} role="presentation" className="trees__tree trees__tree--2" />
the images will of course load.How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.
I'm also having the same problem when I build the app.
If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the
Footer.jsx
andFooter.css
-
Kai Qing about 6 yearsAlso, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.