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

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

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

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

Я почти уверен, что это правильно, потому что когда я заменяю {list.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'
},

Что-то отформатировано неправильно или мне чего-то не хватает?

Спасибо

1
0
22
2

Ответы 2

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

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

Объяснение того, что вы изменили и почему, будет более полезным для будущих посетителей.

Felix Kling 26.10.2018 06:25

Спасибо Think-Twice.

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

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

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

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

Другие вопросы по теме