Vue項目中如何動態切換webp和png格式背景圖片？

如何在vue項目中根據瀏覽器對webp格式的支持情況，動態切換背景圖片的png和webp格式？ 這需要在sass預編譯階段之外，利用vue組件的運行時特性來實現。直接在sass中使用vue組件變量不可行，因為sass編譯發生在瀏覽器運行之前。

解決方案：利用css自定義屬性（CSS variables）。在Vue組件的mounted生命周期鉤子函數中，根據瀏覽器對WebP的支持情況，動態設置CSS自定義屬性–background-image的值。

步驟：

1. Vue模板: 在Vue組件模板中，添加一個容器元素：

   。

2. Vue組件 (JavaScript): 在mounted鉤子函數中，讀取瀏覽器WebP支持情況（例如，從sessionstorage獲取名為”webpsupport”的變量）。根據該變量的值，設置CSS自定義屬性：

   立即學習“前端免費學習筆記（深入）”；

mounted() {   const webpSupport = sessionStorage.getItem("webpsupport");   const webpImage = 'path/to/image.webp'; // 替換為你的WebP圖片路徑   const pngImage = 'path/to/image.png';    // 替換為你的PNG圖片路徑    this.$el.style.setProperty('--background-image', webpSupport === 'true' ? `url(${webpImage})` : `url(${pngImage})`); },

3. Sass: 在Sass文件中，使用var(–background-image)來設置元素的background-image屬性：

.image-container {   background-image: var(--background-image); }

這樣，Sass只負責處理CSS樣式，Vue組件在運行時根據瀏覽器環境動態設置CSS變量的值，從而實現動態切換背景圖片的功能。 這種方法巧妙地規避了Sass無法直接訪問運行時變量的限制。 請確保替換’path/to/image.webp’和’path/to/image.png’為你的實際圖片路徑。