为什么我的本地图像没有加载到我的 React 应用程序中？

React 应用中本地图片无法加载

开发 React 应用时，用户可能会遇到本地存储的图片拒绝显示的问题。尽管成功渲染了外部托管的图像（例如 placehold.it/200x200），但本地图像仍然难以捉摸。要解决此问题，必须深入研究服务器配置。

检查应用程序代码

为 App.js、index.js 和服务器提供的代码。 Node.js 看起来很标准，没有任何明显的异常。然而，调查 App.js 中的图像源揭示了问题的根源：

<img  src="%7B%22/images/resto.png%22%7D" alt="为什么我的本地图像没有加载到我的 React 应用程序中？" >

Webpack 分辨率

使用 Webpack 时，用户定义的图像必须明确要求工具处理它们。目前的使用方式需要Webpack定位到“/images”目录下的图片并显示。如果没有此步骤，Webpack 会忽略本地图像，导致应用程序中缺少它们。

所需的修改

要纠正此问题，请将当前图像源替换为以下语法：

<img  src="%7Brequire('/images/resto.png')%7D" alt="为什么我的本地图像没有加载到我的 React 应用程序中？" >

通过请求图像，Webpack 现在可以处理 App.js 中的原始源并将其替换为正确的图像，从而使本地图像能够按预期显示。

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