When I add an image to my app it doesnt show up

Question

1. I referenced and image as <img src="public/assets/images/sydney.jpg" alt=""/>
2. I put my jpg image in public/assets/images folder.
3. I then build successfully with npm start , however, when I go onto my site the image isn't there. Please comment if you need any more information. Here are some screenshots

Thanks

Code

Here is the app, I want the image to appear in the Sydney FC Box.

import React from 'react';

 import React from 'react'; export const ALeagueTeam = () => { return ( <div> <section id="one" class="tiles"> <article> <span class="image"> <img src="public/assets/images/sydney.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">SYDNEY FC</a></h3> <p>FOUNDED IN 2004</p> </header> </article> <article> <span class="image"> <img src="images/pic02.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">VIEW PLAYERS</a></h3> <p>CURRENTLY 1st</p> </header> </article> <article> <span class="image"> <img src="images/pic03.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">MELBOURNE CITY</a></h3> <p>FOUNDED IN</p> </header> </article> <article> <span class="image"> <img src="images/pic04.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">VIEW PLAYERS</a></h3> <p>CURRENTLY 2ND</p> </header> </article> <article> <span class="image"> <img src="images/pic05.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">WELLINGTON PHOENIX</a></h3> <p>FOUNDED IN </p> </header> </article> <article> <span class="image"> <img src="images/pic06.jpg" alt=""/> </span> <header class="major"> <h3><a href="landing.html" class="link">VIEW PLAYERS</a></h3> <p>CURRENTLY 3RD</p> </header> </article> </section> </div> ); };

Answer 1

If you are using Create React App build system, then you have two options.

#1 Use import statement at the top

import logo from './logo.png';

then

return <img src={logo} alt="Logo" />;

#2 Use public folder and use environment variable to substitute in the path during build

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Both are explainedhere and here

Answer 2

Hello , that is html not react so instead of

HTML :

<img src="/images/sydney.jpg" alt=""/>

you need to use:

REACT :

<img src={require('../images/sydney.jpg')} /> 

replacing image-name.png with the correct image name for each of them. That way the image is able to work properly. Also don't put the img on the public Also it is a duplicate here . Good Luck