Мое приложение React отображает URL-адрес моего изображения в виде URL («неопределенный»);

Question

Итак, вот мой код JSX.

<div class="propertie-item set-bg" style="background-image: url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

Однако, когда я запускаю свое приложение, изображение не загружается. Когда я проверяю элемент, элемент показывает:

<div class="propertie-item set-bg" style="background-image: url('undefined');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

Не уверен, почему он это делает, поскольку это точный путь, и он существует.

Answer 1

Из того, что я вижу, вызов кавычек внутри других кавычек заставляет их убегать. Поэтому я обернул ссылку на изображение внутри '', а не "", чтобы она правильно отображала строку внутри.

<div class="propertie-item set-bg" style="background-image: url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

Если вы хотите преобразовать свой существующий статический сайт в сайт ReactJS, то я бы рекомендовал прочитать это Thinking in React