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

【问题标题】：Cannot load images from my desktop on React无法在 React 上从我的桌面加载图像
【发布时间】：2021-11-06 18:02:42
【问题描述】：

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;

【问题讨论】：

尝试在你的项目中导入文件夹，可能图片的相对路径不是你所期望的
如果您的文件是 x/y/z/index.html，那么您的浏览器安全设置可能不允许它加载像 x/y/image.jpeg 这样的图像。尝试组织事物，使 x/y/z/index.html 位于图像上方，例如 x/y/z/images/pic.jpeg。
你能显示你当前项目树的截图吗？也许路径是错误的，你太想意识到它：D
你是用create-react-app还是自己写webpack配置？
是的，我正在使用 create-react-app。如果有帮助，我已经添加了项目树的屏幕截图

标签： javascript reactjs image load

【解决方案1】：

1 - 您的图片应位于项目源代码中（通常位于“assets”/'images'）文件夹中。

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

【讨论】：

是的，我将它们放在图像文件夹中的项目源代码中

【解决方案2】：

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

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

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

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

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

祝你好运:)

【讨论】：

这也不起作用，当我现在这样做时，它说找不到模块：无法解析 '../Images/banner.bg.jpg' in '/Users/cihemzine/Fisheye/client /src/components'

【解决方案3】：

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

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

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

查看这个问题的答案 (Correct path for img on React.js)，我认为这可能有助于您更好地理解这些解决方案。

【讨论】：