Why this img tag is not loading the image in this code?-CodePudding

import React from 'react';

import styled from 'styled-components';

function Navbar() { return (

    <Container>
        <img src='./appleWhite.png' />
    </Container>
)

}

export default Navbar

const Container = styled.div` height: 24px;

enter image description here

CodePudding user response：

The format of image tag is

<img scr='/picture.jpg/>

You have an unnecessary "." in front of "/"

CodePudding user response：

You need to import the image into your project

import myImage from './appleWhite.png'

<img src={myImage} />

If you don't want to import the image. Then you need to place the image in the public folder then you can use it like this.

 <img src={'/appleWhite.png'} />

During run time, your react code is being bundled and imported as scripts. What you are viewing is the index.html file. There is no src folder at run time which is why your code did not work.