CSS背景图片呈现为url('undefined');即使我定义了它(JSX) [英] CSS background-image renders as url('undefined'); even though I defined it. (JSX)
问题描述
这是我的目标网页的加载方式:
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):
(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>
我确实在代码中定义了URL，但是由于某种原因，URL没有通过.
I did define the URL in my code but for some reason it isn't getting passed through.
但是，当我查看网络"标签时，所有图像请求都收到了200个响应
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.
您可以访问housessoldeasily.netlify.com网站的静态版本.这不是该网站的React版本.
You can go to housessoldeasily.netlify.com for a working static-version of the site. This is not the React version of the site.
这里是Github链接，该链接可以很好地加载背景图片:
Here is a Github link to the component where the background image loads fine:
这里是Github指向组件的链接，我尝试在其中进行完全相同的操作，但背景未加载:
Here is a Github link to a component where I try the exact same thing but the background doesn't load:
如果任何人有任何见识，我们将不胜感激.谢谢.
If anyone has any insight it would be appreciated. Thanks.
推荐答案
@J.母鹿
我有你的问题.与react团队进行更多调试有关的问题是值得的.但是我到位的路由原因/解决方法如下.希望有帮助！
@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!
根本原因:
当一系列css类名具有-时，内联URL设置为undefined.
When series of css class names have -, the inline url is set to undefined.
解决方法:(以下任一方法)
- 删除附加的类
set-bg. - 将
-替换为类名.
- Remove the additional class
set-bg. - Replace the
-in the class names.
示例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;
}
这篇关于CSS背景图片呈现为url('undefined');即使我定义了它(JSX)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
