首页 > web前端 > js教程 > 为什么我的本地图像没有加载到我的 React 应用程序中?

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

Linda Hamilton
发布: 2024-11-17 15:47:02
原创
984 人浏览过

Why are my local images not loading in my React application?

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

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

检查应用程序代码

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

<img src={"/images/resto.png"} />
登录后复制

Webpack 分辨率

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

所需的修改

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

<img src={require('/images/resto.png')} />
登录后复制

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

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板