項目場景：

提示：這里簡述項目相關背景：

在用uniapp做微信小程序的時候，需要一張背景圖，用的是當時做app的時候的框架，但是，在class的樣式中background-image失效了，查了后才知道，微信小程序不支持在class中使用background-image，但是可以在標簽中使用，而且需要圖片路徑是base64編碼格式的。

---

解決方案：

提示：這里填寫該問題的具體解決方案：

1：圖片轉換base64編碼的工具

npm i image-tools --save//引入使用
import { pathToBase64, base64ToPath } from 'image-tools'

2：使用函數進行轉換

//this.imgUrl 圖片路徑 /static/img/bg1.png
pathToBase64(this.imgUrl).then(res=>{this.bgImgBase64=res
})

3：在標簽中使用

//width height 要設置 
/*
background-attachment 屬性值說明
background-attachment 屬性有三個主要的可選值，每個值對應不同的效果：
scroll：默認值，背景圖像會隨著頁面內容滾動。
fixed：背景圖像固定在視窗中，不會隨頁面滾動。
local：背景圖像與元素內容一起滾動，但僅限于該元素的滾動區域內。
*
/<view :style="{width:'100%',height:'100%',backgroundImage:'url('+bgImgBase64+')',backgroundRepeat: 'no-repeat',backgroundPosition: 'center',backgroundSize: '100% 100%',backgroundAttachment: 'fixed',}"class="index-content">
......
</view>

4：效果圖