0

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.

akshat nigam
  • 9
  • 3
  • 4
    It's better to provide the code in the question itself instead of link to image of the code and the website image can be directly added to the question as well. – Ahmar Jul 21 '23 at 19:56

1 Answers1

0
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.

Ahmar
  • 584
  • 2
  • 7
  • 1
    Adding return wont make a difference because these are arrow functions and we can run them without the return statements in JSX. – akshat nigam Jul 22 '23 at 06:54
  • No, return is only implied if the statement is without a block. In case of a statement in block (meaning a statement within '{}' braces) an explicit return is required. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). And the solution works on the playground as well. – Ahmar Jul 22 '23 at 09:56
  • Yeah, actually my bad I just realized I misinterpreted part of the question. It might be an issue with your image src. You could try "src/img.jpg"? – Ahmar Jul 22 '23 at 10:03
  • my image is in the same folder as that of the code file.....and i had tried it even when my image was in some other folder....the problem is still the same!! – akshat nigam Jul 22 '23 at 13:27
  • btw the alt attributes value is getting shown and a sample image is also shown in place of the required image1 – akshat nigam Jul 22 '23 at 13:46
  • I updated the answer, did you try importing the image? – Ahmar Jul 22 '23 at 15:41
  • yes it worked after importing the image , but , if I have to add 20 images in my webpage then like this method , it will take 20 import statements to display the images. How would this problem solve...I do not want to write import statements for every image. – akshat nigam Jul 23 '23 at 02:48