vue背景圖片路徑問題及解決

Posted on by

vue背景圖片路徑

共三種情況：

<div class="about" :style="{backgroundImage:'url('+pic+')'}">
<div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;border-radius: 50%;" :style="{backgroundImage:'url('+item.fromhead+')'}"></div>
pic:require('@/assets/bg.jpg')
<div class="about" :style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}">
<img :src="require('@/assets/bg.jpg')">

css裡面不能用require

在這裡插入圖片描述

上面是body的背景圖片

vue避坑之背景圖片路徑的添加

一般來說咱們添加背景圖片，直接使用語句

background: url();

然後添加路徑就好，而vue新建一個項目之後，會有一個assets文件夾，裡面放著原始vue logo，我一開始誤以為所有的圖片都是放在aasets文件夾下，然後使用命令：

background: url("../aasets/bg2.jpg");

添加路徑，多次嘗試，運行發現總是無法實現加載圖片，然後我新建瞭個和src同級的文件夾static,將圖片放進去，再次添加路徑就可以瞭！

background: url("../static/bg2.jpg");

後來百度瞭下static和assets的區別：

使用assets下面的資源，在js中使用的話，路徑要經過webpack中的file-loader編譯，路徑不能直接寫。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：