I am getting all broken images and alternative text of image in my reactjs project ,any solution for this?

Question

when i run the project the images in the project aren't visible in the browser,is there any solution for visible of images in the browser! project is running smooth but the images aren't visible. where my

my project structure

my mproject link

https://vscode.dev/github/darkleas/company-website-reactjs/blob/main please show me an where was an retify it.!!! please help me,i had tried different approaches but i had getting same.

1. here the broken images for card.js header.js broken image about.js

Answer 1

The React bundler requires you to import static files using the import keyword (which returns a string) before using them, to ensure they refer to the same file in the build folder.

Create react app documentation: https://create-react-app.dev/docs/adding-images-fonts-and-files/

Eg:

import logo from './logo.png'

function Component(){
    return <>
        {//Other JSX}
        <img src={logo} alt="logo" />
    </>
}

Answer 2

As per your folder structure, It seems like you have stored images in the public directory. In order to access those images, you have to enter the path as /img/img1.png which refers to the path relative to the public folder.

const App = () => {
return (
    <div>
      //Public directory image
      <img src="/img/img1.png" />
    </div>
)
}

If you have images somewhere in the src folder, you can follow the approach mentioned by Shakya above.

import logo from './logo.png'

function App(){
    return <div>
        <img src={logo} alt="logo" />
    </div>
}