[英]When I add an image to my app it doesnt show up
<img src="public/assets/images/sydney.jpg" alt=""/>
我引用和图像为<img src="public/assets/images/sydney.jpg" alt=""/>
public/assets/images
folder.我将我的 jpg 图像放在public/assets/images
文件夹中。npm start
, however, when I go onto my site the image isn't there.然后我使用npm start
成功构建,但是,当我将 go 放到我的网站上时,图像不存在。 Please comment if you need any more information.如果您需要更多信息,请发表评论。 Here are some screenshots这是一些截图Thanks谢谢
Here is the app, I want the image to appear in the Sydney FC Box.这是应用程序,我希望图像出现在 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> ); };
If you are using Create React App build system, then you have two options.如果您使用的是 Create React App 构建系统,那么您有两个选择。
#1 Use import statement at the top #1 在顶部使用 import 语句
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 #2 在构建过程中使用公共文件夹并使用环境变量替换路径
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
Hello , that is html not react so instead of你好,那是 html 没有反应所以而不是
HTML : 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.将 image-name.png 替换为每个图像的正确图像名称。 That way the image is able to work properly.这样图像才能正常工作。 Also don't put the img on the public Also it is a duplicate here .也不要把 img 公之于众, 这里也是重复的。 Good Luck祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.