img not displaying (img src file path wrong?)

Asked Dec 08 '21 at 14:11

Active Dec 08 '21 at 14:24

Viewed 32 times

this is my header.js

<div className="navbar">
      <header>
        <div>
          <img src="../Images/coatHanger.svg" alt="coatHanger" />
          <h1>E-commerce</h1>
        </div>
        <div>
          <ul className="nav-items">
            <li>Products</li>
            <li>Home</li>
            <li>About</li>
          </ul>
        </div>
      </header>
    </div>

this is my file structure

src
|Components
||Header.js
|Images
||coatHanger.svg
|App.js
|Index.js

this is the css for the img

img[alt="coatHanger"] {
  width: 100px;
  height: 100px;
}

I have tried "./Images/coatHanger.svg" and "/Images/coatHanger.svg" but those don't work either.

Edit:Thanks now it works. Using import

edited Dec 08 '21 at 14:24

asked Dec 08 '21 at 14:11

Saul Lopez

What do you mean by _doesn't work_? if you using webpack, make sure you install [file-loader](https://webpack.js.org/loaders/file-loader/) – Mehdi Dehghani Dec 08 '21 at 14:14
try this: `` – davood Sandoghsaz Dec 08 '21 at 14:16
@davoodSandoghsaz — That won't work. Try reading the duplicate question. – Quentin Dec 08 '21 at 14:24
It works now with importing the img – Saul Lopez Dec 08 '21 at 14:26

img not displaying (img src file path wrong?)

0 Answers0