为什么我无法在 React 应用程序中加载本地图像？

本地图像未在 React 应用程序中加载

背景：

本地图像有时无法在 React 应用程序中加载，尽管外部图像渲染成功。这可能是一个令人沮丧的问题，特别是对于依赖本地图像进行设计和功能的开发人员而言。

故障排除：

问题通常在于图像的来源方式在反应应用程序中。原因如下：

• Webpack 集成： 在 React 项目中使用 Webpack 时，需要明确要求图像，然后 Webpack 才能处理和替换其源路径。
• 文件路径问题：仅在 src 属性中提供图像的相对或绝对文件路径不会

解决方案：

要解决此问题，请使用 require() 函数导入本地图像。下面是一个示例：

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={require('/images/resto.png')} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

通过使用 require('/images/resto.png')，您可以指示 Webpack 处理图像并相应地替换源路径。这可确保图像正确加载并显示在应用程序中。

以上是为什么我无法在 React 应用程序中加载本地图像？的详细内容。更多信息请关注PHP中文网其他相关文章！