React +内联样式+外部js对象-图像未显示答案

【问题标题】：React+inline style + external js object - Image not showingReact +内联样式+外部js对象-图像未显示
【发布时间】：2019-03-30 18:27:06
【问题描述】：

我是反应新手，并且一直在通过视频教程学习它，但我被困在一个部分。我正在制作一个带有反应的房地产列表网站，搜索结果是从 JS 对象生成的。除图像外，所有数据都可以从对象（地址、城市等）正常加载。

列表组件中的 HTML 行如下所示：

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

我很确定这是正确的，因为当我将 {listing.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'
},

是不是格式有误，还是我遗漏了什么？

谢谢

【问题讨论】：

标签： reactjs image inline jsx

【解决方案1】：

试试这个。您可以使用模板文字将 url 应用于背景，但您实际上并没有将图像值添加到 url ${} 这仅适用于模板文字，但不适用于字符串

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

【讨论】：

解释您所做的更改以及为什么对未来的访问者更有帮助。

【解决方案2】：

感谢 Think-Twice。

您的回复让我查找模板文字，在那里我发现我使用的是撇号（或单引号）而不是反引号

' 和 ` 看起来确实很相似。

正确的行是：

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

【讨论】：