Use images in CSS files with ReactJS

Question

I have an image inside src/assets/images folder in my ReactJs project. How can I use it in a CSS file as background-image without use relative paths?

I added in jsconfig.json the src folder in compilerOptions.baseUrl so in js files I can do:

import logo from 'assets/images/logo.svg'
<img src={logo} />

but what about css files? I have several folders and I'd like to avoid ugly strings like

background-image: url(../../../assets/images/logo.svg)

I'm using React 16.8.6

EDIT: I used create-react-app, so I haven't webpack files exposed and the ejection shoud be avoided.

It's EniGma · Accepted Answer · 2020-09-04 07:15:03Z

15

You can use (./) . Webpack automatically link the image for eg:-

.user-background{
    background: url("./images/all-bg-title.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
  }

Above image(all-bg-title.jpg) is at folder /src/images/all-bg-title.jpg

React Docs Link here

answered Sep 4, 2020 at 7:15

It's EniGma

4344 silver badges6 bronze badges

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

1 Comment

James Hubert Over a year ago

This is exactly what I needed, thank you. Solved all of my errors. To repeat the steps: 1. Put images into an src/images folder in CRA 2. Reference the image in CSS with a relative path using "." at the beginning of the path so Webpack can find it You saved me!

TsungJui Wang · Accepted Answer · 2019-07-23 11:36:50Z

2

Consider using Webpack for static assets bundle, this tutorial might help you: https://webpack.js.org/guides/asset-management/

Basically, 3 steps:

First use file-loader for any extensions of images you want.
import your image in the js file.
Now CSS file can simply get the simplified url

Update: Since you don't want to modify the webpack config file, you might consider making your image inline. It improves performance by not creating another http request for the image(only for small size images)

edited Jul 23, 2019 at 11:36

answered Jul 23, 2019 at 11:30

TsungJui Wang

3281 silver badge4 bronze badges

5 Comments

JustAnotherDeveloper Over a year ago

I used create-react-app, so I haven't webpack files exposed and the ejection shoud be avoided.

JustAnotherDeveloper Over a year ago

Do you mean something like background-image: url("data:image/svg+xml;utf8,<svg......></svg>")?

TsungJui Wang Over a year ago

Consider make a base64 version of it, or any format of inline style can do the trick.

JustAnotherDeveloper Over a year ago

So I need to put it in a variable (with Sass or var) in case I need to use it in several places. But what if my image is not small?

TsungJui Wang Over a year ago

Http request is expensive, so unless ur pic is high resolution, doing it should be ok. But it is a bad approach for long term development since u need every base64 representation of images. The best approach in my opinion is creating ur own app so u can take advantage of webpack.

Rahul Rana · Accepted Answer · 2019-07-23 11:15:56Z

1

You can set public path / so images path resolved with respect to public so if you have images in public path then just do images/assets/asd.jph it will resolve it with public path

answered Jul 23, 2019 at 11:15

Rahul Rana

4652 silver badges8 bronze badges

4 Comments

JustAnotherDeveloper Over a year ago

What if the image is not in public path but in src or node_modules folder? I could make a symbolic link but I don't think that this is a reactjs-oriented solution.

Rahul Rana Over a year ago

You can set in your webpack config how to resolve specific files

JustAnotherDeveloper Over a year ago

I used create-react-app, so I haven't webpack files exposed and the ejection shoud be avoided .

Rahul Rana Over a year ago

Then I am not sure of any other way

Gabrielle Durano · Accepted Answer · 2019-07-23 11:19:30Z

0

try using svg format on images, then make a react class, then create an index.js where in you will import everything in one file then import image to wherever you want

answered Jul 23, 2019 at 11:19

Gabrielle Durano

4884 silver badges7 bronze badges

Collectives™ on Stack Overflow

Use images in CSS files with ReactJS

4 Answers 4

1 Comment

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related