vue template當中style背景設置不編譯問題
更新時間：2022年04月15日 11:29:06 作者：luguz
這篇文章主要介紹了vue template當中style背景設置不編譯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
template中style背景設置不編譯
在vue定義的組件當中，直接設置行內style無法顯示背景，里面使用config.resolve.alias當中設置的 @等路徑符也無法識別
<el-card style="backgroundImage:`url(`圖片地址`)" class="box-card" shadow="hover">
解決方法
在將圖片資源在vue 的 data當中解析再綁定到頁面
<el-card :style="{backgroundImage:`url(${img})`}" class="box-card" shadow="hover">
// data當中定義 組件需要在函數(shù)當中返回數(shù)據(jù) 保證數(shù)據(jù)的作用域
data: function(){
? ? return {
? ? ? ? weatherData:{},
? ? ? ? img: require('@assets/image/sunny_n.jpg')
? ? }
? },如何給template組件加背景
<template>
? <div class="index_background" >
? </div>
</template>
<style>
.index_background{ background: url('~@/../static/images/login-bg.png') center top no-repeat;}
</style>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
又是一個老生常談的功能，接下來會從零實現(xiàn)一個萬年日歷，從布局到邏輯，再到隨處可見的打卡功能。文中的示例代碼簡潔易懂，需要的可以參考一下2023-01-01
這篇文章主要介紹了Vue 事件的$event參數(shù)=事件的值案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項目開發(fā),客戶覺得地圖上的文字標注太多了,要求地圖上只顯示省市等主要城市的標注,這篇文章主要給大家介紹了關于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue中遇到的坑之變化檢測問題（數(shù)組相關） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2023-03-03
這篇文章講給大家詳細介紹一下Vue如何實現(xiàn)登錄后添加動態(tài)路由并跳轉，文章通過代碼示例介紹的非常詳細，對我們的學習或工作有一定的的幫助,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了Vue.js通用應用框架-Nuxt.js的上手教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue-router提供的導航鉤子主要用來攔截導航,讓它完成跳轉或取消，本文主要介紹了vue-router之路由鉤子函數(shù)應用小結，具有一定的參考價值，感興趣的可以了解一下2024-01-01
vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果
這篇文章主要為大家詳細介紹了vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
本文主要介紹了Vue.js實現(xiàn)全屏背景圖片滑動切換特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01