CSS background-image呈现为url（'undefined'）;即使我定义了它。 （JSX）

Question

这是我的目标网页应加载的方式：

这是我的目标网页加载的方式：

在呈现错误的页面上，英雄的代码（在顶部被截断）使用以下代码加载背景图像：

（阵营/ JSX）：

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

但是，当我尝试与其他四个图像相同的方法时：

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

它没有加载。当我检查元素时，我看到了这个：

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

我确实在我的代码中定义了URL但由于某种原因它没有通过。

然而，当我查看网络选项卡时，所有图像请求都收到了200个响应

真的不确定为什么它适用于英雄的背景图像而不适用于子类别。

您可以访问housessoldeasily.netlify.com获取该网站的静态版本。这不是网站的React版本。

这是一个Github链接到背景图像加载正常的组件：

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

这是一个组件的Github链接，我尝试完全相同的东西，但背景不加载：

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

如果有人有任何见解，将不胜感激。谢谢。

Answer 1

@J。 Doe，我遇到了你的问题。值得提出的问题是react团队调试更多。但是我的路线原因/修复如下。希望有所帮助！

根本原因：

当css类名称系列具有-时，内联url设置为undefined。

解决方法:(以下任一项）

• 删除其他类set-bg。
• 替换类名中的-。

示例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;

}

Answer 2

我不确定你是否是这个模板的作者，我一直在使用这个模板并尝试修改它以使其适合我自己的用途。我遇到了和你一样的问题，如果你看一下模板的包，你在js / main.js中有一个js文件，打开它并查找“背景设置”评论部分：

$('.set-bg').each(function() {
    var bg = $(this).data('setbg');
    $(this).css('background-image', 'url(' + bg + ')');
});

问题是当浏览器加载代码时，即使在页面（html文件）加载之前，(function(){...})()内部的任何内容都会被立即执行，如果它发生（在这种情况下总是发生），JavaScript解释器将找不到任何html元素属于类'setbg'，因为没有html文件。

我所做的解决方案是将你需要的任何代码（不仅仅是'setbg'的实用程序）放入$(window).on('load',function(){...})并删除旧代码。

希望这可以帮助。