React + встроенный стиль + внешний объект js - изображение не отображается - PullRequest
Новая
       19

React + встроенный стиль + внешний объект js - изображение не отображается

0 голосов
/ 26 октября 2018

Я новичок, чтобы реагировать, и изучал его с помощью видеоуроков, но я застрял на одной части. Я делаю сайт по недвижимости с реакцией, и результаты поиска генерируются из объекта JS. Все данные загружаются нормально с объекта (адрес, город и т. Д.), Кроме изображений.

Строка HTML в компоненте листинга выглядит следующим образом: 

<div className="listing-img" style={{background: 'url("${listing.image}") no-repeat center center'}}>

Я почти уверен, что это правильно, потому что когда я заменяю {перечисление.image} на URL-адрес изображения, он загружается нормально.

Объект выглядит так: 

{
    address: '5500 Young Ave.',
    city: 'Portland',
    state:'OR',
    rooms:4,
    price:340000,
    floorSpace:3500,
    extras: [
        'elevator'
    ],
    homeType: 'apartment',
    image: 'https://image1.apartmentfinder.com/i2/Uh7pU-5z2gxB-ly2VsPGufzUCh0zPkDZH1YOZKjU6u8/110/cielo-apartments-charlotte-nc-saltwater-pool-and-courtyard.jpg'
},

Что-то неправильно отформатировано или я что-то пропустил?

Спасибо

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Благодаря Think-Twice.

Ваш ответ привел меня к поиску литералов шаблонов, где я обнаружил, что вместо обратных галочек я использовал апострофы (или одинарные кавычки)

'и `выглядят очень похоже.

правильная строка: 

  <div className="listing-img" style={{background: `url("${listing.image}") no-repeat center center`}}>
0 голосов
/ 26 октября 2018

Попробуй это.Вы можете использовать литералы шаблона для применения URL к фону, но вы фактически не добавляете значение изображения к URL $ {}, это работает только внутри литералов шаблона, но не со строками 

    <div className="listing-img" style={{background: {`url(${listing.image}) no-repeat center center`}}}>
...