Issue with displaying background image in a div with REACT

Question

I am trying to display a background image in a div and though it works fine for a standard img tag I can't make it work for the div. What am I doing wrong? Below is where I import the image:

import imgPackage from '../img/package.png';

And below is the 2 pieces of code - div doesn't display anything and img works fine.

<div
  style={{
  height: '50px',
  width: '50px',
  backgroundImage: 'url(${ imgPackage })'
  }}
/>

<img src={imgPackage} alt="Smiley face" height="42" width="42" />

In the div backgroundImage I tried the following and none worked

backgroundImage: 'url(${ imgPackage })'
backgroundImage: 'url('+{ imgPackage }+')'
backgroundImage: 'url(../img/package.png)'

What am I doing wrong? Thanks!

Duplicate Issue stackoverflow.com/questions/39195687/…

Japesh
– Japesh

2018-09-17 07:54:37 +00:00
Commented Sep 17, 2018 at 7:54 — Japesh
– Japesh, Commented Sep 17, 2018 at 7:54

James Donnelly · Accepted Answer · 2018-09-17 07:47:09Z

4

You're trying to use a template literal but you're using single quotes instead of back-ticks.

Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

— Template literals on MDN

<div
  style={{
    ...,
    backgroundImage: `url(${imgPackage})`
  }}
/>

answered Sep 17, 2018 at 7:47

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Malkhazi Dartsmelidze · Accepted Answer · 2018-09-17 07:51:40Z

2

Try using this. on single quotes you cant use ${} syntax. it can be used with `` back tick

backgroundImage: `url(${ imgPackage })`
backgroundImage: 'url('+ imgPackage +')'

answered Sep 17, 2018 at 7:51

Malkhazi Dartsmelidze

4,9924 gold badges20 silver badges44 bronze badges

Comments

Kort · Accepted Answer · 2018-09-17 07:55:10Z

1

Any of your tries are wrong. Following variants will work after some changes:

If you prefer ES6 template literals you should use back-ticks quotes for them:

backgroundImage: `url(${ imgPackage })`;

If you prefer plain strings no need to add extra single quotes inside url():

backgroundImage: 'url( + { imgPackage } + )';

This case might working with appropriate url-loader from you webpack etc. Consider to use 2 examples above.

backgroundImage: 'url(../img/package.png)'

answered Sep 17, 2018 at 7:55

Kort

4203 silver badges11 bronze badges

Collectives™ on Stack Overflow

Issue with displaying background image in a div with REACT

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related