当我将图像添加到我的应用程序时，它不会显示

Question

1. 我引用和图像为 <img src="public/assets/images/sydney.jpg" alt=""/>
2. 我将我的 jpg 图像放在public/assets/images 文件夹中。
3. 然后我使用npm start 成功构建，但是，当我进入我的站点时，图像不存在。 如果您需要更多信息，请发表评论。这是一些截图

谢谢

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

如果您使用的是 Create React App 构建系统，那么您有两个选择。

#1 在顶部使用 import 语句

import logo from './logo.png';

然后

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

#2 在构建过程中使用公用文件夹并使用环境变量替换路径

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

对here和here都有解释

Answer 2

你好，就是html没有反应，而是

HTML：

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

你需要使用：

反应：

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

将 image-name.png 替换为每个图像的正确图像名称。这样图像才能正常工作。也不要将 img 公开它也是重复的here。祝你好运???