---
# System prepended metadata

title: utils/cssImg 使用說明
tags: [深思設計]

---

# CSS背景圖片 使用方式
* ### **確保後續維護及開發規範統統一，新的實作方式請依照第一點方法為主!!**
*  **"確認數據已從後台接入的圖檔，請將該圖檔從專案移除"**


1. 若寫在js或html，路徑須由getImage涵式回傳，路徑內若有版本字串(ex: aaa, aae) 用變數替代
2. 若寫在css裡，需用css custom property(自定屬性)，將變數放置於`utils/cssImg/...` 內，並於`layout`引入

## 引入方式
於layout引入:
```
import { useDynamicImg } from "@/utils/cssImg"
const siteSettingsInfo = computed(() => store.state.siteSettingsInfo);
const { customStyle } = useDynamicImg('aaa', siteSettingsInfo)
```
將customStyle動態綁定到dom上，該節點底下的節點(元件)才會吃到變數
**siteSettingsInfo需整包丟入，避免失去響應性**
### 變數
- 名稱snakecase格式(ex: --aae-phone-home-popular-game-bg)
- 各版共用變數放`utils/cssImg/others`內，非共用放`utils/cssImg/[版本]`