CODEWITHSUNDEEP
javascriptcssreactjs
llssff
llssff

Reputation: 119

React import background image

Trying to import a jpeg image to use as my background in React, but keep getting error msg

Error: Can't resolve '/img/dots.jpeg' in 'D:\Developer\mysite\src'

My App.css

.App {
  text-align: center;
  background-image: url('/img/dots.jpeg');
}

My App.js

import './App.css';

function App() {
  return (
      <div className="App" >
          <h1>asdasdasd</h1>
      </div>
  );
}

export default App;

My project structure:

My project structure

My understanding is as long as the image is in the src folder I can access it relatively through URL(). Can someone tell me what I am doing wrong?

Upvotes: 0

Views: 680

Answers (3)

Bhaskar Hs
Bhaskar Hs

Reputation: 21

it seems there is wrong in importing the file in your css,

you are not telling the exact position to look for the file

.App {
    text-align: center;
    background-image: url('/img/dots.jpeg');
}

add these above lines it will solve the problem

Upvotes: 0

Richard Lovell
Richard Lovell

Reputation: 888

/img/dots.jpeg is indicating that it's in the root of your project, whereas ./img/dots.jpeg will indicate that the img directory is in the same directory as the App.css file.

Upvotes: 2

Karthikeyan
Karthikeyan

Reputation: 414

You can use module-resolver plugin and update your babel config with

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "test": "./test",
        "underscore": "lodash"
      }
    }]
  ]
}

#same configuration available in the link. Then you can refer your image with complete path

Upvotes: 0

Related Questions