英文:
When I add an image to my app it doesnt show up
问题
- 我将图像引用为
<img src="public/assets/images/sydney.jpg" alt=""/> - 我将我的 jpg 图像放在
public/assets/images文件夹中。 - 然后我成功构建了
npm start，但是当我进入我的网站时，图像不在那里。
如果需要更多信息，请留下评论。这里有一些截图。
谢谢
import React from 'react';
{/* begin snippet: js hide: false console: true babel: false */}
{/* language: lang-html */}
英文:
- I referenced and image as
<img src="public/assets/images/sydney.jpg" alt=""/> - I put my jpg image in
public/assets/imagesfolder. - 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
Here is the app, I want the image to appear in the Sydney FC Box.
import React from 'react';
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
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>
);
};
<!-- end snippet -->
答案1
得分: 1
#1 在顶部使用导入语句
import logo from './logo.png';
然后
return <img src={logo} alt="Logo" />;
#2 使用公共文件夹，并在构建过程中使用环境变量替代路径
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
英文:
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'} />;
答案2
得分: 0
HTML:
<img src="/images/sydney.jpg" alt=""/>
REACT:
<img src={require('../images/sydney.jpg')} />
这是HTML和React代码的对比，用于加载图像。确保替换每个中的图像名称，以使图像正常工作。此外，不要将图像放在公共目录中。这个问题也在这里有重复讨论。祝你好运！😀😀😀
英文:
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 😀😀😀
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论