Set backgroundImage array mapping using React inline styles

Question

This is my folder structure:

src
   --Assets/
            --pug.svg
            --scss.svg
   --Layouts/
            --Skills/
                    --Skills.js
   --App.js

My array

const skills = [
  {
    id: 1,
    title: 'Pug',
    image: 'url(../../Assets/pug.svg)'
  },
  {
    id: 2,
    title: 'SCSS',
    image: 'url(../../Assets/scss.svg)'
  }

In Skills.js I want to set the backgroundImage using React's inline styles, but it doesn't work. I don't get any error, just the backgroundImage doesn't show up.

{
    skills.map(skill => (
        <motion.div className='column' key={skill.id} variants={container}>
           <div className='skill'>
             <div className='skill-image' style={{ backgroundImage: `${skill.image}`  }}/>
             <h3>{skill.title}</h3>
           </div>
        </motion.div>
      ))
   }

Just to be clear - background-image is attached to skill-image element, but simply not shown? — Aitwar
– Aitwar, Commented Jun 7, 2022 at 10:43
Yes, it's attached when I open my console, but it doesn't show up. — Marius Gardelli
– Marius Gardelli, Commented Jun 7, 2022 at 10:49
Is this Create-React-App project or, if not, what bundler do you use? — Aitwar
– Aitwar, Commented Jun 7, 2022 at 10:53

Aitwar · Accepted Answer · 2022-06-07 11:09:29Z

You cannot use relative paths in background-image directly. Those won't be resolvable from browser perspective as modules aren't preserved, but bundled together instead.

Now, to make it work you can:
a) move your assets (images) to /public and then replace their paths with /pug.svg and /scss.svg.
b) import images directly in your JavaScript files using import

First option uses special /public directory. Assets located there can be reached by browser. See https://create-react-app.dev/docs/using-the-public-folder/ for details.

As for importing assets directly, this heavily relies on your bundler (Webpack). It will resolve those files while building and attach them to the output. If you want to know more visit https://create-react-app.dev/docs/adding-images-fonts-and-files.

Look at following code block. I've replaced your relative paths with URLs returned from import statements. You can look them up using console.log to see the difference.

import pugImage from '../../Assets/pug.svg';
import scssImage from '../../Assets/scss.svg';

const skills = [
  {
    id: 1,
    title: 'Pug',
    image: pugImage,
  },
  {
    id: 2,
    title: 'SCSS',
    image: scssImage,
  }
]

A G · Accepted Answer · 2022-06-07 11:14:46Z

1

Issue is that your Assets folder is not public. If you move the images from Assets to public/images, you will see the background will start working -

You have two options now -

import the image

import background from "../../Assets/pug.svg";
backgroundImage: `url(${background})`

OR

use require

backgroundImage: `url(${require("../../Assets/pug.svg")})`

edited Jun 7, 2022 at 11:14

answered Jun 7, 2022 at 10:49

A G

22.9k12 gold badges94 silver badges113 bronze badges

Comments

Hans Murangaza DRCongo · Accepted Answer · 2022-06-07 11:17:03Z

0

Change backgroundImage to background

{
    skills.map(skill => (
        <motion.div className='column' key={skill.id} variants={container}>
           <div className='skill'>
             <div className='skill-image' style={{ background: `${skill.image}`  }}/>
             <h3>{skill.title}</h3>
           </div>
        </motion.div>
      ))
   }

answered Jun 7, 2022 at 11:17

Hans Murangaza DRCongo

8707 silver badges17 bronze badges

Collectives™ on Stack Overflow

Set backgroundImage array mapping using React inline styles

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related