Image relative url not working in react js

Question

I have to display an image in my project so I gave a relative path in src properties but it is not working.

Anyone suggest me a solution.

Thanks

Please add some relevant code or info. Its not possible to help with provided info — Mobeen, Jul 29 '19 at 12:52

score 0 · Answer 1 · answered Jul 29 '19 at 14:05

0

You can import image as a component and directly use it:

import { ReactComponent as Logo } from "../../assets/logo.png";

And

<Logo className={classes.logo} />

answered Jul 29 '19 at 14:05

Danica Shen

When I am using the above code at it give me Module parse failed: Unexpected character '�' error. – Test Jul 30 '19 at 04:30
Are you using `create-react-app`? If not, please refer to this: https://stackoverflow.com/questions/45848055/image-you-may-need-an-appropriate-loader-to-handle-this-file-type to use `file-loader` package to help you out. – Danica Shen Aug 06 '19 at 14:44

score -1 · Answer 2 · answered Jul 29 '19 at 13:25

-1

You need to use the import instead of passing a path as a string.

import React from 'react';
import logo from './logo.png';

function Header() {
  return <img src={logo} alt="Logo" />;
}

export default Header;

For more information please visit documentation

answered Jul 29 '19 at 13:25

InkFaust

When I am using the above code at it give me Module parse failed: Unexpected character '�' error. – Test Jul 30 '19 at 04:32

2 Answers2