HTML img 標籤 src 屬性詳解：URL vs 路徑，跨域引用圖解

核心定義

src（source）屬性指定圖片資源的網路位址（URL），而非本機檔案系統路徑。瀏覽器會對此 URL 發起 HTTP/HTTPS 請求下載圖片。

URL 與本機路徑的關鍵差異

常見 src 寫法範例

<!-- 同域絕對路徑 -->
<img src="/assets/logo.png" alt="Logo">

<!-- 相對路徑 -->
<img src="../images/banner.jpg" alt="Banner">

<!-- 外部 CDN -->
<img src="https://cdn.example.com/avatar/123.jpg" alt="Avatar">

<!-- Base64 Data URI (小圖示優化) -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Icon">

<!-- 響應式圖片 (srcset) -->
<img src="small.jpg" srcset="medium.jpg 800w, large.jpg 1200w" alt="Responsive">

跨域圖片載入注意事項

• 無 CORS 標頭： 圖片可顯示，但 canvas.drawImage() 會污染畫布，導致 toDataURL() 失敗。
• 需啟用 CORS： 伺服器回應 Access-Control-Allow-Origin: *，且 <img crossorigin="anonymous">。
• 防盜鏈： 伺服器檢查 Referer 標頭，非授權域名回傳 403/圖片置換。

效能優化建議

1. 使用 width/height 屬性預留空間，避免版面跳動 (CLS)。
2. 啟用 loading="lazy" 延遲載入非首屏圖片。
3. 採用 WebP/AVIF 格式並配合 <picture> 降級。
4. CDN 加速 + 長期快取 Cache-Control: max-age=31536000, immutable。

記住： src 永遠是「網路上的位置」，瀏覽器不認得你的 D 槽路徑。本機開發請架設靜態伺服器（如 npx serve、VS Code Live Server），勿直接雙擊 HTML 檔案。