Question

我是新来的反应者，一直在通过视频教程来学习它，但是我只停留在一部分上。我正在用React创建一个房地产列表网站，并且搜索结果是从JS对象生成的。除了图像之外，所有数据都可以从对象（地址，城市等）正常加载。

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

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

我非常确定这是正确的，因为当我将{listing.image}替换为图像网址时，它可以正常加载。

对象看起来像这样：

{
    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'
},

是格式错误，还是我丢失了其他内容？

谢谢

Answer 1

尝试一下。您可以使用模板文字将url应用于背景，但是您正在做的是实际上没有将图像值添加到url $ {}中，这仅在模板文字中有效，而对于字符串不起作用

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

Answer 2

感谢思想两次。

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

'和`看起来很相似。

正确的行是：

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

React + inline样式+外部js对象-图片未显示

2 个答案: