0
  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>
    );
};
Prashant
  • 1,002
  • 13
  • 29
DK10
  • 1
  • 1
  • Would it be possible for you to move the code from the image into the question? This site has a code block system that you can use. It's this symbol { } when you are editing/posting a question – The Grand J Aug 10 '20 at 03:28
  • @TheGrandJ there is the code :) " " that part – DK10 Aug 10 '20 at 03:31

2 Answers2

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 explained here and here

Alex M
  • 11
  • 1
  • Module not found: Can't resolve './sydney.jpg' in 'C:\Users\danie\my-app\src\components\ALeagueTeam' ?? – DK10 Aug 10 '20 at 04:00
  • The image needs to be local to the source file. If you're using method #1, then the image cannot be in the public folder. Also to verify, you did start this project with npx create-react-app right? Cause other build systems have different behaviors. – Alex M Aug 10 '20 at 04:06
  • Yes I believe i did start it with that? Do you have discord can i push u my code? – DK10 Aug 10 '20 at 04:14
0

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

  • Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/219530/discussion-on-answer-by-xatifx-when-i-add-an-image-to-my-app-it-doesnt-show-up). – Samuel Liew Aug 10 '20 at 06:42