欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue :style設(shè)置背景圖片方式backgroundImage

 更新時間：2023年10月13日 16:20:53   作者：確認(rèn)過眼神cxy  
這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue :style設(shè)置背景圖片backgroundImage

vue日?？?/h3>

vue :style 設(shè)置動態(tài)設(shè)背景圖片 backgroundImage

控制臺會報錯 404錯誤，但是不影響頁面使用

如下：

http://localhost:8080/ooooo/undefined 404 (Not Found)

主要是vue渲染機制問題

你可以設(shè)置data變量一個默認(rèn)值，或者 v-if 判斷網(wǎng)絡(luò)圖片路徑存在，再加載圖片

如下:

<div v-if='img ' :style="{backgroundImage: 'url('+ img +')'，backgroundSize:cover }"></div>

vue動態(tài)設(shè)置style屬性修改背景圖片

原始class屬性設(shè)置背景樣式

 
  .bannerP {
    position: absolute;
    top: 0;
    left: 2.96rem;
    right: 0;
    bottom: 0;
    background: url(../../assets/img/backgroundp.jpg) no-repeat center;   //  本地靜態(tài)圖片路徑
    background-size: cover;
  }

通過JavaScript實現(xiàn)動態(tài)修改背景圖片

首先html中設(shè)置style為 動態(tài)綁定 即 ：style

 <div :class=" $store.state.isMobile?'bannerH':'bannerP'" ref="backGroundRef" :style="bacImage">
    </div>

在JavaScript方法中則可以通過修改綁定bacImage實現(xiàn)動態(tài)更換背景屬性。 

 mounted () {
            let imageName = 'mobile' //手機終端
            //  通過瀏覽器判斷終端為手機(true) 或者 pc(false) 動態(tài)切換背景圖片
            if (!this.$store.state.isMobile) {
                imageName = 'web'  // pc 瀏覽器
                this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/loginBackground.gif")'}
            }
            else {
                this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/web_background.jpg")'}
            }
        },

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決Echarts 顯示隱藏后寬度高度變小的問題

    解決Echarts 顯示隱藏后寬度高度變小的問題

    這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例

    Vue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例

    下面小編就為大家?guī)硪黄猇ue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示

    Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示

    在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧
    2024-07-07
  • VUE + OPENLAYERS實現(xiàn)實時定位功能

    VUE + OPENLAYERS實現(xiàn)實時定位功能

    本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2021-09-09
  • vscode中eslint配置保存自動修復(fù)代碼示例詳解

    vscode中eslint配置保存自動修復(fù)代碼示例詳解

    vscode根據(jù)eslint保存?動修復(fù)配置,下面這篇文章主要給大家介紹了關(guān)于vscode中eslint配置保存自動修復(fù)代碼的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • vue中PC端地址跳轉(zhuǎn)移動端的操作方法

    vue中PC端地址跳轉(zhuǎn)移動端的操作方法

    最近小編接到一個項目pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應(yīng)頁面，下面小編給大家分享實現(xiàn)過程，一起看看吧
    2021-11-11
  • Vue 實用分頁paging實例代碼

    Vue 實用分頁paging實例代碼

    本篇文章主要介紹了Vue 實用分頁paging實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • vue+阿里的G2圖表-antv+折線圖實例

    vue+阿里的G2圖表-antv+折線圖實例

    這篇文章主要介紹了vue+阿里的G2圖表-antv+折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • 使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

    使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式

    這篇文章主要介紹了使用ElementUI中el-upload上傳文件轉(zhuǎn)base64格式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • vue中el-upload上傳圖片到七牛的示例代碼

    vue中el-upload上傳圖片到七牛的示例代碼

    這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧
    2018-10-10

最新評論