react中使用img显示本地图片时不显示

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 图片没有加载出来的问题

2.react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值