Реакция: фоновое изображение не будет отображаться

Question

Я новичок в реактиве.

Я пытаюсь показать некоторые изображения из массива. Но я не могу понять, что это неправильно или что я делаю неправильно здесь ...

Heres мой код:

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') 
); 

Я написал это из верхней части моей головы, так что не уверен, работает ли это, просто скопировать пасты.

В любом случае, попробуйте и сообщите нам.