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 引入，構建工具才能在打包時處理這些資源。
