react 图片没有加载出来的问题
我原来是这样写的
<Layout><Sider><imgsrc="../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 引入，构建工具才能在打包时处理这些资源。
