CSS background-image отображается как url ​​('undefined'); хотя я определил это. (JSX)

Question

Вот как должна загружаться моя целевая страница:

Вот как загружается моя целевая страница:

На странице, отображающей неправильно, код для hero, который обрезан вверху, прекрасно загружает фоновое изображение с помощью следующего кода:

(React / 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

Я не уверен, что вы являетесь автором этого шаблона, я использую этот шаблон и пытаюсь изменить его, чтобы он соответствовал моим собственным потребностям. Я столкнулся с той же проблемой, что и вы, если вы посмотрите на пакет шаблона, в js / main.js есть файл js, откройте его и найдите раздел с комментариями "background set":

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

Проблема заключается в том, что когда браузер загружает код, все, что находится внутри (function(){...})(), выполняется немедленно, даже до загрузки страницы (html-файл), если это происходит (в этом случае это всегда происходит), интерпретатор JavaScript не найдет никаких html-элементов, принадлежащих классу 'setbg', потому что нет html-файла.

Решение, которое я сделал, - поместить в него $(window).on('load',function(){...}) любой необходимый код (а не просто утилиту setbg) и избавиться от старого кода.

Надеюсь, это поможет.

Answer 2

@ J. Doe, У меня твоя проблема. Стоит поднять проблему с командой react, чтобы больше отлаживать. Но причина / исправление маршрута, которое я имею в месте, как ниже. Надеюсь, это поможет!

Основная причина:

Когда серии имен классов css имеют -, встроенный URL-адрес устанавливается на неопределенное значение.

Обходной путь: (любой из следующих)

• Удалить дополнительный класс 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;

}