---
# System prepended metadata

title: 圖片元件
tags: [無障礙]

---

<style>
.blue {
  color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩圖片元件
🔗 [CodePen 範例一](https://codepen.io/judyshyu/pen/OJdNJbZ?editors=1010)
除了上傳圖的欄位，需要替代文字欄位

前台結構：
```html!
<img src=”{圖片檔案網址}" alt=”{圖片替代文字}">
```
![image](https://hackmd.io/_uploads/rkq-skJI6.png)
