react 图片没有加载出来的问题

发布于：2024-05-16 ⋅ 阅读:(65) ⋅ 点赞:(0)

react 图片没有加载出来的问题

我原来是这样写的

            <Layout>
                    <Sider>
                        <img
                             src="../images/login/topdivbg20221202.png"
                        />
                    </Sider>
                    <Content>
                        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal"            items={items} />
                    </Content>
                </Layout>

开始排查

1.是否路径是否写错了

仔细排查了一下路径没有写错

2.是否是图片没有访问的权限

在这里插入图片描述
查看了一下是完全控制不是这个问题

接下来看了一下官方文档

在这里插入图片描述
我跟官方文档的不同之处是官方文档引用的是网络图片，我引用的是本地的。
自己想不出来如何解决问文心一言文心一言说是文件结构的问题

我改成了

     <Layout>
                    <Sider>
                        <img src={require('../images/login/topdivbg20221202.png')} alt="图标"/>
                    </Sider>
                    <Content>
                    <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
                    </Content>
                </Layout>

一运行果然图片可以显示出来了

现在要搞清楚

1.为什么原生js的图片可以直接引入，react要使用require 或import来导入

原生js图片资源通常是通过简单的HTML标签直接引入的，在这种情况下，浏览器直接解析HTML，找到 src 属性对应的路径，并请求服务器获取图片。这是因为浏览器本身就是一个能够处理HTML和静态资源（如图片、CSS、JS文件等）的环境，它直接访问这些资源所在的路径。
在react中，路径解析由构建工具处理，而不是直接由浏览器处理。要使用 import 或 require，你将图片路径传递给构建工具，确保在最终的打包过程中这些资源被正确引用和处理。

2.为什么在react中网络上的图片可以直接引入，本地要使用require 或import来导入

当你引用一个网络上的图片时，你可以直接使用URL，因为浏览器能够直接通过HTTP向图片存储地址发送请求加载这些资源，因此不需要 require 或 import。
当你引用本地图片资源时，这些图片需要被打包到你的项目中，才能在浏览器中正确加载。因此，必须通过 require 或 import 引入，构建工具才能在打包时处理这些资源。

react 图片没有加载出来的问题