Header's Logo Image Not Appearing Properly

Question

I am rendering HTML using JSX and creating a header which has logo to the left side...but it is coming out to be in the way that is shown in my uploaded photo. I have also uploaded the corresponding code of the component This is the code

this is the website error occuring

Please advice me what to do

I tried to check the network tab in my chrome developer tools...the message showing is 200 OK(I guess which is correct when the image is loaded) and still it is not appearing.

Answer 1

Update:

According to this answer you need to import the image.

import React from 'react';
import img from './istockphoto-1239476413-1024x1024.jpg'

const Title = () => (
  <img 
    className="Logo"
    src={img} 
    alt="logo"
  />
 )

export function App(props) {
  return (
    <div className='App'>
     <div className='header'>
      <Title />
      <div className="nav-items">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>Cart</li>
        </ul>
      </div>
    </div>
    </div>
  );
}

Here's a link to the react playground.