反应：背景图片不会显示

Question

我是React新手。

我想显示一些数组中的图像。但我无法弄清楚什么是错的或我在做什么错在这里...

继承人我的代码：

function Product(props) { 
    const content = props.products.map((product) => 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
        <div className="product-item"> 
         <div className="product-item_img" style={productImg} data-product-image={product.img}> 
          <div className="product-item_img__view"> 
           <button className="button button_g" data-toggle="#modal">View details</button> 
          </div> 
         </div> 
         <header className="product-item_header" data-product-name={product.header}>{product.header}</header> 
         <div className="product-item_desc">{product.desc}</div> 
         <footer className="product-item_footer">{product.price}</footer> 
        </div> 
    </article> 
); 
    return (
    <div className="flex-row"> 
     {content} 
    </div> 
); 
} 

const products = [ 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
]; 

const productImg = { 
    backgroundImage: 'url(' + products.img +')' 
}; 

ReactDOM.render(
    <Product products={products} />, 
    document.getElementById('content') 
); 

Answer 1

问题是，产品是一个数组，访问您所需要的IMG还指定了索引，就像这样：

const productImg = { 
    backgroundImage: 'url(' + products[index].img +')' 
}; 

您传递组件的产品阵列，所以不是用它想，定义组件本身的backgroundImage。试试这个：

function Product(props) { 
 
    const content = props.products.map((product) => 
 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
 
     <div className="product-item"> 
 
      <div className="product-item_img" style={{background: 'url('+ product.img + ') 50% 10% no-repeat', height: '200px', width: '200px'}} data-product-image={product.img}> 
 
       <div className="product-item_img__view"> 
 
        <button className="button button_g" data-toggle="#modal">View details</button> 
 
       </div> 
 
      </div> 
 
      <header className="product-item_header" data-product-name={product.header}>{product.header}</header> 
 
      <div className="product-item_desc">{product.desc}</div> 
 
      <footer className="product-item_footer">{product.price}</footer> 
 
     </div> 
 
    </article> 
 
); 
 
    return (
 
    <div className="flex-row"> 
 
     {content} 
 
    </div> 
 
); 
 
} 
 

 
const products = [ 
 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
 
]; 
 

 
ReactDOM.render(
 
    <Product products={products} />, 
 
    document.getElementById('content') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='content'></div>

Answer 2

东西如下会做：

function Product(props) { 
    const content = props.products.map((product) => 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
     <div className="product-item"> 
     <div className="product-item_img" style={getProductImageStyle(product)} data-product-image={product.img}> 
     <div className="product-item_img__view"> 
      <button className="button button_g" data-toggle="#modal">View details</button> 
     </div> 
     </div> 
     <header className="product-item_header" data-product-name={product.header}> 
     {product.header} 
     </header> 
     <div className="product-item_desc">{product.desc}</div> 
     <footer className="product-item_footer">{product.price}</footer> 
     </div> 
    </article> 
); 
    return (
    <div className="flex-row"> 
     {content} 
    </div> 
); 
} 

const products = [ 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
]; 

const getProductImageStyle = product => ({ 
    backgroundImage: 'url(' + product.img +')' 
}); 

ReactDOM.render(
    <Product products={products} />, 
    document.getElementById('content') 
); 

我写这从我的头顶，所以不知道是否它的工作方式只是复制粘贴。

无论如何，请尝试并让我们知道。