---
tags: N108 Component
---
# ExamProblemImg.jsx
- component 切換流程圖
- 可以配合 PPT 17頁

digraph Pageswitch {
                nodesep=0.8
                node [color=orange, fontsize=22, shape=box]
                edge [color=RosyBrown, style=dashed]
                Exam->{Contain Wrapper}
                Wrapper->{ProblemImg Choosebtn Issue}
                ProblemImg [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :----------- |
| `{ apiurl }` | <font color='orange'>string</font> | API 網址 | ./config.json |
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `str` | <font color='orange'>string</font> | 圖片 path 後處理後的字串 |
### return
- 純 HTML

<div className="dis-center2 img-containter">
    <img
        className="problem"
        src={`${apiurl}/img/${str}`}
        alt="題目錯誤"
    />
</div>

[回上層 ExamWrapper.jsx](https://hackmd.io/JqzV6luhSsCA3CPCxtt_sg?view)