Picture is not visible

Tags: ,



The picture is not visible on my HTML page. Image Path values are true. I didn’t get an error in the code part, but what is the problem?

import React from 'react';
import {Wrapper, Title} from './Header.styled';
const Header = ({children}) => {    
    
    return <Wrapper>
        <Title>KFC</Title>
        <div className='logoDiv'>
            <img src="../../assets/logo.png"/>
        </div>
        
        
    </Wrapper>;
}

export default Header;

Answer

You have to import your logo file first.

import logo from '../../assets/logo.png';

Then you need to call the image using the img tag.

<img className='logo' src={logo} />


Source: stackoverflow