Vue為div標(biāo)簽設(shè)置assets內(nèi)本地背景圖片的實(shí)現(xiàn)方法
更新時(shí)間：2025年05月29日 09:07:00 作者：瘋狂的沙粒
在 Vue 中為 <div> 設(shè)置 assets 目錄下的本地背景圖片,需要通過 Webpack 或 Vite 等構(gòu)建工具 處理路徑引用,本文通過代碼示例給大家介紹了詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下
前言
在 Vue 中為 <div> 設(shè)置 assets 目錄下的本地背景圖片，需要通過 Webpack 或 Vite 等構(gòu)建工具 處理路徑引用。以下是詳細(xì)實(shí)現(xiàn)方法：
一、項(xiàng)目結(jié)構(gòu)說明
假設(shè)你的項(xiàng)目結(jié)構(gòu)如下：
src/
assets/
images/
bg.jpg # 背景圖片
components/
MyComponent.vue
App.vue
二、通過內(nèi)聯(lián)樣式引用（推薦）
在 <div> 中使用 :style 綁定背景圖片，并通過 require() 或 import 引入圖片路徑。
方法 1：使用 require()（兼容 Webpack 和 Vite）
<template>
<div
class="bg-div"
:style="{
backgroundImage: `url(${require('@/assets/images/bg.jpg')})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
內(nèi)容區(qū)域
</div>
</template>
<style scoped>
.bg-div {
width: 100%;
height: 400px; /* 設(shè)置高度以顯示背景 */
}
</style>
方法 2：先 import 再綁定（現(xiàn)代打包工具推薦）
<template>
<div class="bg-div" :style="{ backgroundImage: `url(${bgImage})` }">
內(nèi)容區(qū)域
</div>
</template>
<script>
// 引入圖片（等價(jià)于 require 方式）
import bgImage from '@/assets/images/bg.jpg';
export default {
data() {
return {
bgImage // 直接使用導(dǎo)入的路徑
};
}
};
</script>
<style scoped>
.bg-div {
width: 100%;
height: 400px;
background-repeat: no-repeat;
}
</style>
三、通過 CSS 類引用
在 CSS 中直接聲明背景圖片路徑，構(gòu)建工具會(huì)自動(dòng)處理路徑解析。
方法 1：使用相對(duì)路徑（推薦）
<template>
<div class="bg-div">內(nèi)容區(qū)域</div>
</template>
<style scoped>
.bg-div {
width: 100%;
height: 400px;
/* ~@ 表示 src 目錄，是 Vue 約定的別名 */
background-image: url(~@/assets/images/bg.jpg);
background-size: cover;
background-position: center;
}
</style>
方法 2：使用絕對(duì)路徑（通過 @ 別名）
<style scoped>
.bg-div {
background-image: url('@/assets/images/bg.jpg'); /* 部分工具需加 ~ */
}
</style>
四、關(guān)鍵細(xì)節(jié)說明
路徑別名
@的含義：@是 Vue 項(xiàng)目中默認(rèn)指向src目錄的別名（由vue.config.js或 Vite 配置定義）。- 路徑示例：
@/assets/images/bg.jpg等價(jià)于src/assets/images/bg.jpg。- 若路徑報(bào)錯(cuò)，可嘗試添加
~前綴（如~@/assets/...），表示作為模塊解析。
圖片處理流程：
- 構(gòu)建工具會(huì)將
assets中的圖片復(fù)制或打包為靜態(tài)資源，并生成正確的 URL（如./img/bg.abc123.jpg）。 - 無需手動(dòng)復(fù)制圖片到
public目錄，構(gòu)建工具會(huì)自動(dòng)處理。
- 構(gòu)建工具會(huì)將
動(dòng)態(tài)切換圖片：
<template>
<div :style="{ backgroundImage: `url(${getBgImage()})` }"></div>
</template>
<script>
export default {
methods: {
getBgImage() {
// 根據(jù)條件返回不同圖片路徑
return this.isLogin ? require('@/assets/login-bg.jpg') : require('@/assets/home-bg.jpg');
}
}
};
</script>
五、常見問題解決方案
1. 圖片路徑錯(cuò)誤（404 問題）
- 原因：路徑未正確解析。
- 解決：
- 確保使用
@別名或require()/import引入。 - 檢查圖片文件是否存在，且路徑拼寫正確（注意大小寫）。
- 確保使用
2. 背景圖片不顯示
- 原因：容器未設(shè)置寬高。
- 解決：
.bg-div {
width: 100%;
height: 300px; /* 必須設(shè)置高度或內(nèi)容撐開容器 */
}
3. Vue 3 + Vite 環(huán)境
- Vite 中
@別名需手動(dòng)配置（若未生效）：
// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // 定義 @ 指向 src 目錄
},
},
});
六、完整示例代碼
<template>
<div class="page-bg">
<h1>歡迎來到 Vue 項(xiàng)目</h1>
</div>
</template>
<script>
// 導(dǎo)入圖片（可選，也可直接在 CSS 中引用）
import bgImg from '@/assets/images/bg.jpg';
export default {
data() {
return {
imgPath: bgImg // 可用于動(dòng)態(tài)綁定
};
}
};
</script>
<style scoped>
.page-bg {
/* 方式 1：CSS 直接引用 */
background-image: url(~@/assets/images/bg.jpg);
/* 方式 2：通過 data 綁定 */
/* background-image: url(${imgPath}); */
width: 100vw;
height: 100vh;
background-size: cover;
background-attachment: fixed; /* 背景固定 */
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
通過以上方法，可輕松在 Vue 中為 <div> 設(shè)置 assets 內(nèi)的本地背景圖片，確保構(gòu)建工具正確處理路徑和資源打包。
到此這篇關(guān)于Vue為div標(biāo)簽設(shè)置assets內(nèi)本地背景圖片的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue div設(shè)置assets內(nèi)本地背景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript性能優(yōu)化之減少DOM操作全方位攻略指南
DOM操作是Web開發(fā)中最耗性能的操作之一,頻繁的DOM訪問和修改會(huì)導(dǎo)致瀏覽器不斷重繪和回流,嚴(yán)重影響頁面性能,下面我們就來看看JavaScript減少DOM操作的具體方法吧2025-12-12
通過JS的事件循環(huán)機(jī)制,可以更清楚JS代碼的執(zhí)行流,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章讓你搞清楚JavaScript事件循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-06-06
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了js如何操作iframe父子窗體,需要的朋友可以參考下2014-05-05
前端日志采集,說簡(jiǎn)單也簡(jiǎn)單,說復(fù)雜也復(fù)雜,取決于業(yè)務(wù)想要什么粒度的數(shù)據(jù),以及開發(fā)者能接受多少侵入性、延遲和兼容性問題,今天我們就來盤一盤常見的幾種前端上報(bào)方式,以及各自的優(yōu)劣勢(shì)和適用場(chǎng)景,需要的朋友可以參考下2025-05-05
移動(dòng)web開發(fā)之touch事件實(shí)例詳解
下面小編就為大家分享一篇移動(dòng)web開發(fā)之touch事件實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
javascript中substring()、substr()、slice()的區(qū)別
在js中字符截取函數(shù)有常用的三個(gè)slice()、substring()、substr()了，下面我來給大家介紹slice()、substring()、substr()函數(shù)在字符截取時(shí)的一些用法與區(qū)別吧。2015-08-08
javascript中的繼承使用實(shí)例代碼，需要的朋友可以參考下。2011-04-04
uni-app低成本封裝一個(gè)取色器組件的簡(jiǎn)單方法
最近想實(shí)現(xiàn)一個(gè)uniapp取色器組件,實(shí)現(xiàn)后發(fā)現(xiàn)效果還不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于uni-app低成本封裝一個(gè)取色器組件的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了JavaScript 如何在瀏覽器中使用攝像頭，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-12-12