react中使用img显示本地图片时不显示
问题描述:
最近在学习尚硅谷的react课程时,在 React 组件中使用<img src='./logo192.png'>
标签展示本地图片时,尽管路径没有问题且图片存在,但图片仍然无法正常显示。而在原生 HTML 和 JavaScript 中,这种方式可以正常显示图片,并且使用网络图片连接也可以正常显示图片。
问题分析:
①图片的问题?:使用原生HTML页面以及Vue以同样的方式使用<img src='./logo192.png'>
显示本地图片,结果均能正常显示图片,排除图片损坏的可能
②图片没给大小所以图片不显示?给图片添加宽度和高度后,使用浏览器F12查看,图片有合适的宽度和高度,图片仍然不能正常显示
③在原生 HTML 和 JavaScript 中,通过简单的 HTML 标签直接引入图片,浏览器会直接解析 HTML,找到 src 属性对应的路径,并请求服务器获取图片。这是因为浏览器本身能够处理 HTML 、静态资源(如图片、CSS、JS 文件等)以及网络图片资源,直接访问这些资源所在的路径。
然而,在 React 项目中,资源加载和路径解析是通过构建工具(如 Webpack)处理的,而不是直接由浏览器处理的。这导致了图片资源引用方式的不同。
问题原因:
①构建工具的介入:在 React 项目中,资源文件(如图片)需要通过构建工具(例如 Webpack)进行处理和打包。这意味着图片文件需要被 Webpack 解析和打包到最终的输出中,才能在浏览器中正确加载。
②模块化导入:为了让 Webpack 正确处理图片资源,需要通过 require 或 import 语句显式地导入图片文件。这允许 Webpack 在构建过程中解析这些资源,并生成正确的资源路径。
③路径解析的差异:在原生 HTML 中,路径是直接由浏览器解析的,而在 React 项目中,路径是由构建工具解析的。这就需要采用不同的路径引用方式。
解决方法:
方法一:使用import将图片导入使用
使用变量接收引入的图片
import ReactImg from './logo192.png'
img的src使用该变量即可
<img src={ReactImg} style={{ width: '80px' }} alt="" />
结果:图片正常显示
方法二:使用require引入路径
<img src={require("./logo192.png").default.default} />
结果:图片正常显示
本文参考以下博客:
1.react 图片没有加载出来的问题