Media

圖片與影片。新版面請優先用 AtomPicture —— 它會先把版面空間佔住，避免圖片載入時整頁跳動。

圖片

AtomPicture

components/Atom/Picture.vue

模板裡的 <img> 幾乎都沒寫寬高，圖片載入前後版面會跳動（CLS）。這個元件用 aspect-ratio 的外框先佔住空間，圖片再填進去。

裝飾性圖片請把 alt 明確傳空字串，元件會一併補上 aria-hidden；首屏主視覺加 priority。

不同長寬比

首屏圖

名稱	型別	預設值	說明
`src`*	String	—	圖片路徑
`alt`	String	''	純裝飾圖請明確傳空字串，元件會一併補上 aria-hidden
`width`	String \| Number	null	原始寬度，輸出成 width 屬性讓瀏覽器保留空間
`height`	String \| Number	null	原始高度
`ratio`	Number	null	長寬比，例如 16 / 9。沒給時由 width / height 推算
`priority`	Boolean	false	首屏圖用。改 loading="eager" 並帶 fetchpriority="high"
`srcset`	String	null	需要多尺寸時自己傳，元件不自動產生
`sizes`	String	null
`fit`	'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'	'cover'	object-fit 行為

* 為必填

AtomImage

components/Atom/Image.vue

src 走 useAsset() 解析 assets/images 底下的檔案，並在載入失敗時顯示替代區塊。

需要控制長寬比或 CLS 時請改用上面的 AtomPicture。

基本用法

名稱	型別	預設值	說明
`src`*	String	—	走 useAsset() 解析 assets/images 底下的檔案
`alt`	String	''
`width`	String \| Number	'auto'	直接套在外層容器的 style 上
`height`	String \| Number	'auto'
`loading`	'lazy' \| 'eager'	'lazy'

* 為必填

AtomVideo

components/Atom/Video.vue

同時支援 YouTube 與原生播放器，用 is-yt-video 切換。 YouTube 的 video-src 傳影片 ID，原生的傳檔案路徑。

要自動播放就一定要同時 muted —— 瀏覽器不會讓有聲影片自動播放。

YouTube 影片