要在html中插入本地圖片，需正確使用標簽并指定路徑。1. 使用src屬性指向圖片文件，推薦使用相對路徑以確保可移植性；2. 注意路徑拼寫、大小寫及文件是否存在；3. 圖片無法顯示時檢查路徑、緩存、權限，并通過開發者工具查看請求狀態碼；4. 優化加載速度可通過壓縮圖片、選擇合適格式、使用cdn、懶加載及設置尺寸；5. 讓圖片自適應屏幕可用css的max-width和height屬性；6. 添加標題可用
直接在HTML中插入本地圖片，核心在于正確使用標簽，并指定圖片文件的路徑。路徑是關鍵，搞錯了就顯示不出來。
解決方案
使用標簽，src屬性指向你的本地圖片文件。例如：
立即學習“前端免費學習筆記（深入）”；
@@##@@
這里的src是圖片的路徑，alt是圖片的替代文本，當圖片無法顯示時會顯示這段文字。
- 相對路徑： 上面的例子就是相對路徑，相對于HTML文件的位置。如果my_image.jpg在HTML文件同目錄下的images文件夾里，就這樣寫。
- 絕對路徑： 也可以用絕對路徑，比如C:/Users/YourName/Pictures/my_image.jpg，但不推薦，因為換個電腦就失效了。
確保圖片文件確實存在于你指定的路徑下。大小寫也敏感！
HTML圖片顯示不出來怎么辦？常見原因及解決方法
圖片顯示不出來，通常是路徑問題。仔細檢查以下幾點：
- 路徑拼寫錯誤： 這是最常見的錯誤。檢查文件名、文件夾名是否拼寫正確，大小寫是否一致。
- 路徑指向錯誤： 確認路徑是相對于HTML文件的正確位置。
- 文件不存在： 確認圖片文件確實存在于指定的路徑下。
- 瀏覽器緩存： 有時候瀏覽器緩存會導致圖片顯示不出來。嘗試清除瀏覽器緩存，或者使用無痕模式打開。
- 文件權限問題： 極少數情況下，可能是文件權限導致瀏覽器無法訪問。
如果以上方法都試過了，還是不行，可以嘗試在瀏覽器開發者工具（按F12打開）的”Network”選項卡中查看圖片請求的狀態碼。如果是404，說明文件找不到；如果是其他錯誤碼，則需要根據具體情況分析。
如何優化HTML中圖片的加載速度？
圖片加載速度慢是很影響用戶體驗的。可以從以下幾個方面入手：
-
壓縮圖片： 使用圖片壓縮工具，減小圖片文件的大小。有很多在線工具可以做到這一點，比如TinyPNG。
-
使用合適的圖片格式： 對于色彩豐富的圖片，可以使用JPEG格式；對于需要透明背景的圖片，可以使用PNG格式；對于簡單的圖標，可以使用SVG格式。 WebP格式也是一個不錯的選擇，它在壓縮率和質量方面都有優勢。
-
使用CDN： 將圖片放在CDN（內容分發網絡）上，可以加快圖片的加載速度。
-
懶加載： 使用懶加載技術，只在圖片進入可視區域時才加載圖片。可以使用loading=”lazy”屬性來實現：
@@##@@
-
設置圖片尺寸： 在
標簽中設置圖片的width和height屬性，可以防止頁面重排。@@##@@
相對路徑和絕對路徑，我應該用哪個？
通常情況下，推薦使用相對路徑。原因如下：
- 可移植性： 相對路徑是相對于HTML文件的位置，因此當整個項目移動到其他地方時，路徑仍然有效。
- 易于維護： 相對路徑更加簡潔，易于理解和維護。
只有在極少數情況下，比如圖片位于服務器的根目錄下，或者需要在不同的網站之間共享圖片時，才需要使用絕對路徑。
如何讓圖片自適應屏幕大小？
可以使用css來實現圖片自適應屏幕大小。常用的方法是設置max-width屬性為100%，height屬性為auto：
img { max-width: 100%; height: auto; }
這樣，圖片的最大寬度將等于其父元素的寬度，高度將自動調整以保持圖片的寬高比。 還可以使用Object-fit屬性來控制圖片如何適應其容器。
如何在HTML中添加圖片的標題？
可以使用
<figure> @@##@@ <figcaption>這是一張漂亮的圖片</figcaption> </figure>
如何使用html5的
<picture> <source media="(max-width: 600px)" srcset="images/my_image_small.jpg"> <source media="(max-width: 1200px)" srcset="images/my_image_medium.jpg"> @@##@@ </picture>
標簽作為備選方案，當所有標簽中的圖片。
這個方法對于響應式設計非常有用。
