在React上无法从我的桌面加载图像

Question

输入图像描述这里我有一个文件夹图像在我的桌面与。jpg和。svg在我的src文件，我想添加到一个组件，但我不能加载它们。我不明白我做错了什么。有人能帮忙吗?

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




const Banner = () => {


return (

<div className="banner">
<img src="../Images/banner.bg.jpg" alt="banner" />

<div className="text">
<img src='../Images/party-icon.svg' alt="party" />
<h3>Let's The Fun Begin!</h3>
<p>Thanks for your order, we'll have it with you as soon as possible.<br></br>
Your order number is #10293838 and a confirmation email has been sent to the address provided.</p>
<p>Order Even Faster in Future</p>


<button className="button">CREATE AN ACCOUNT</button>


</div>


</div>

);

}
export default Banner;

Answer 1

您可以导入这些单独的图像&在src上使用它，或者您可以使用require。

如果你把你的Images目录放在公共文件夹中，那么你可以像这样直接访问你的图像

src="/Images/banner.bg.jpg"

检查这个问题的答案(React.js上的正确路径)，我认为这可能有助于你更好地理解这些解决方案。

Answer 2

1 -您的图像应该位于您的项目源代码(通常在'assets'/'images')文件夹中。

2 -确保<img src='../Images/party-icon.svg' alt="party" />中的源路径相对于当前文件，并指向位于assets文件夹中的party-icon.svg。

Answer 3

您可以像这样导入顶部的图片:

import bg from '../Images/banner.bg.jpg'

然后像这样添加PIC:

<img src={bg} alt="banner" />

你可以对其他图片做同样的事情。而不是bg，你可以写任何你想写的。为不同的图片选择合适的名字会更好。

祝你好运