快捷導(dǎo)航

前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法

更新時(shí)間：2019年11月13日 08:29:13 作者：淺吟輕唱

這篇文章主要介紹了前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前端中背景圖片極其常用,但是很容易出現(xiàn)各種問(wèn)題.

一種是腳手架本身資源引用方式的問(wèn)題,如指定靜態(tài)資源文件夾.

一種是圖片資源引入方式,有時(shí)候使用絕對(duì)或者相對(duì)路徑會(huì)導(dǎo)致錯(cuò)誤.

css方法

正常使用background屬性即可.

如有問(wèn)題,應(yīng)把圖片資源放入static靜態(tài)資源文件夾,不是assets之類(lèi)的其他文件夾.

<div class="bgImg"></div>
<style>
.bgImg{
  background-image:url("@/../static/images/logo.png")
}
</style>

import方法

使用import導(dǎo)入背景圖片

import bgImg from "@/../static/images/logo.png"
export default {
  name: 'App',
  data () {
    return {
      bgImg: bgImg,
    }
  }
}

使用內(nèi)聯(lián)樣式

<div :style="{backgroundImage:'url('+bgImg+')'}"></div>

require方法

使用require獲取圖片

export default {
  name: 'App',
  data () {
    return {
      bgImg: require("@/../static/images/logo.png"),
    }
  }
}

賦值為img的src

<img :src="bgImg" />

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂(lè)播放器的示例
這篇文章主要介紹了vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂(lè)播放器的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue中created和mounted的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于vue中created和mounted區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue3 獲取當(dāng)前組件實(shí)例及場(chǎng)景分析
在Vue 3中,getCurrentInstance是一個(gè)用于獲取當(dāng)前組件實(shí)例的重要函數(shù),以下是對(duì)getCurrentInstance的詳細(xì)分析,感興趣的朋友一起看看吧
2024-12-12
Vue PostCSS的使用介紹
postcss一種對(duì)css編譯的工具，類(lèi)似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過(guò)插件實(shí)現(xiàn)功能，autoprefixer就是其一
2023-02-02
Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
vue.js 獲取當(dāng)前自定義屬性值
本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue和小程序項(xiàng)目中使用iconfont的方法
這篇文章主要介紹了vue中和小程序中使用iconfont的方法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫(kù),它非常適合在前端開(kāi)發(fā)中模擬后端?API,尤其是在前后端分離的開(kāi)發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下
2024-10-10
Vue+Element?switch組件的使用示例代碼詳解
這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06