close

[Solved] How to import image (.svg, .png ) in a React Component

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error How to import image (.svg, .png ) in a React Component in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How to import image (.svg, .png ) in a React Component Error Occurs?

Today I get the following error How to import image (.svg, .png ) in a React Component in javascript.

How To Solve import image (.svg, .png ) in a React Component Error ?

  1. How To Solve import image (.svg, .png ) in a React Component Error ?

    To Solve import image (.svg, .png ) in a React Component Error Solved the problem, when moved the folder with the image in src folder. Then I turned to the image (project created through “create-react-app”)
    let image = document.createElement(“img”); image.src = require('../assets/police.png');

  2. How to import image (.svg, .png ) in a React Component

    To Solve import image (.svg, .png ) in a React Component Error Solved the problem, when moved the folder with the image in src folder. Then I turned to the image (project created through “create-react-app”)
    let image = document.createElement(“img”); image.src = require('../assets/police.png');

Solution 1


try using

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Solution 2

Solved the problem, when moved the folder with the image in src folder. Then I turned to the image (project created through “create-react-app”)
let image = document.createElement(“img”); image.src = require(‘../assets/police.png’);

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment