adding background-image dynamically not working in React

Question

I'm trying to display images in the clientsSection component. I chose to work with div elements and change their background images dynamically,but the images are not showing up. if I apply other styles they work, but not background-image.

My component:

import React from 'react';
import { clientsData } from './data';
import './clients.styles.css';

const ClientsSection = () => (
    <div className="clients-section-container">
        <h2>we've helped over 600 clients achieve</h2>
        <div className="clients-images">
            {
                clientsData.images.map(image => {
                    return <div  style={{ ...image }}></div>
                })
            }
        </div>

    </div>

)

export default ClientsSection;

data file:

export const clientsData = {
   images: [
       {
           'position': 'absolute',
           'width': '13%',
           'height': '30%',
           'left': '40%',
           'top': '20%',
           'backgroundImage': 'url(../../images/Vector-3.svg)',
           'backgroundSize': 'contain',
           'backgroundRepeat': 'no-repeat',

       },
       {
           'position': 'absolute',
           'width': '13%',
           'height': '30%',
           'left': '67%',
           'top': '22%',
           'backgroundImage': 'url("../../images/Vector-2.svg")',
           'backgroundSize': 'contain',
           'backgroundRepeat': 'no-repeat'
       }
   ]
}

By the way, I was keeping my images in the public folder and it was working, but I read that its a bad practice (might cause problems on build) so I changed them in /src/images

my component is under /src/sections/clients-section

Answer 1

Try to import the image you are going to use like this :

import first_image from './Assets/icons/airPlaneBlack.png';
import second_image from './Assets/icons/metro-printer.png';

Then use them in your DataFile like this :

export const clientsData = {
  images: [
      {
          'position': 'absolute',
          'width': '13%',
          'height': '30%',
          'left': '40%',
          'top': '20%',
          'backgroundImage': `url(${first_image})`,
          'backgroundSize': 'contain',
          'backgroundRepeat': 'no-repeat',

      },
      {
          'position': 'absolute',
          'width': '13%',
          'height': '30%',
          'left': '67%',
          'top': '22%',
          'backgroundImage': `url(${second_image})`,
          'backgroundSize': 'contain',
          'backgroundRepeat': 'no-repeat'
      }
  ]
}

Finally You can Display them in UI like this :

<div >
    <h2>we've helped over 600 clients achieve</h2>
    <div >
        {
            clientsData.images.map(image => {
                return <div  style={{ ...image }}></div>
             })
        }
    </div>
</div>

And your output will look like this (I have removed styling, please include them later) :

Answer 2

Have you tried this one?

backgroundImage: `url("path to image")`