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

Question

enter image description here我的桌面上有一个 Images 文件夹，我的 src 文件上有 .jpg 和 .svg，我想将其添加到组件上，但我无法加载它们。我不明白我做错了什么。有人可以帮忙吗？

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

1 - 你的图片应该放在你的项目源文件中（通常在'assets'/'images'）文件夹中。

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

Answer 2

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

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

然后像这样添加你的照片：

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

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

祝你好运:)

Answer 3

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

如果您将 Images 目录放在 public 文件夹中，那么您可以像这样直接访问您的图像

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

检查这个问题的答案（），我认为这可能有助于您更好地理解这些解决方案。

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

Cannot load images from my desktop on React

javascript

load

image

reactjs