CSS background-image renders as url('undefined'); even though I defined it. (JSX)

Question

This is how my landing page should load:

This is how my landing page does load:

On the page that renders wrong, the code for hero, which is cut off at the top, loads the background image just fine with the following code:

(React/JSX):

<section className="hero-section" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg')" }> </section>

But when I try that same method with the four other images:

<div className="propertie-item set-bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/1.jpg')" } }></div>

It doesn't load. When I inspect element, I see this:

<div class="propertie-item set-bg" style="background-image: url("undefined");"></div>

I did define the URL in my code but for some reason it isn't getting passed through.

Yet when I view the network tab, all of the image requests received 200 responses

Really not sure why it works for the hero's background image but not for the sub-categories.

You can go to housessoldeasily.netlify.com for a working static-version of the site. This is not the React version of the site.

Here is a Github link to the component where the background image loads fine:

https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/HeroSection.js

Here is a Github link to a component where I try the exact same thing but the background doesn't load:

https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/PropertiesSection.js

If anyone has any insight it would be appreciated. Thanks.

Answer 1

@J. Doe, I got your problem. It is worth raising an issue with react team to debug more. But the route cause/fix i have in place is as below. Hope that helps!

Root cause:

When series of css class names have -, the inline url is set to undefined.

Workaround: (either one of the below)

• Remove the additional class set-bg.
• Replace the - in the class names.

Sample html

    <div className="col-md-6">
      <div className="propertie-item set_bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/4.jpg')" } }>
        <div className="rent-notic">FOR Rent</div>
        <div className="propertie-info text-white">
          <div className="info-warp">
            <h5>339 N Oakhurst Dr Apt 303</h5>
            <p><i className="fa fa-map-marker" /> Beverly Hills, CA 90210</p>
          </div>
          <div className="price">$3000/month</div>
        </div>
      </div>
    </div>

CSS

.set_bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

}