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

Question

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

谢谢

代码

这是应用程序，我希望图像出现在 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'} />;

两者都在这里和这里进行了解释

Answer 2

你好，那是 html 没有反应所以而不是

HTML ：

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

你需要使用：

反应：

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

将 image-name.png 替换为每个图像的正确图像名称。 这样图像才能正常工作。 也不要把 img 公之于众， 这里也是重复的。 祝你好运