vue template當(dāng)中style背景設(shè)置不編譯問題
更新時間:2022年04月15日 11:29:06 作者:luguz
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
template中style背景設(shè)置不編譯
在vue定義的組件當(dāng)中,直接設(shè)置行內(nèi)style無法顯示背景,里面使用config.resolve.alias當(dāng)中設(shè)置的 @等路徑符也無法識別
<el-card style="backgroundImage:`url(`圖片地址`)" class="box-card" shadow="hover">
解決方法
在將圖片資源在vue 的 data當(dāng)中解析再綁定到頁面
<el-card :style="{backgroundImage:`url(${img})`}" class="box-card" shadow="hover"> // data當(dāng)中定義 組件需要在函數(shù)當(dāng)中返回數(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>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07基于Vue實現(xiàn)Excel解析與導(dǎo)出功能詳解
導(dǎo)入導(dǎo)出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實現(xiàn)Excel解析與導(dǎo)出功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08vue發(fā)送websocket請求和http post請求的實例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07