我有一个问题，我的图像不会显示答案

【问题标题】：I have a problem where my image wont show up我有一个问题，我的图像不会显示
【发布时间】：2020-11-30 22:09:44
【问题描述】：

我引用和图像为我把我的 jpg 图像放在 public/assets/images 文件夹中。然后我使用 npm start 成功构建，但是，当我进入我的站点时，图像不存在。如果您需要更多信息，请发表评论。这是一些截图谢谢

代码：https://i.stack.imgur.com/Zpc8e.png

徽标应该出现在哪里（悉尼足球俱乐部）https://i.stack.imgur.com/Jg7Pl.png

代码：

import React from 'react';
import './style.css'

export const ALeagueTeam = () => {
    return (
        <div>
            <section id="one" class="tiles">
                <article>
                                    <span class="image">
                                    <img src={require('../../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>
    );
};

【问题讨论】：

标签： html

【解决方案1】：

解决方案：CODESANDBOX

它看起来不像你的图片，因为我没有你的 CSS，但应该显示图片。我不知道在 JS 编程中同时使用新的模块系统 import 和旧的模块系统（例如 CommonJS require()）的情况。如果您使用 Create-React-App 构建，我认为您不应该在您的 react 应用程序中的任何地方使用 require。

【讨论】：