1. 程式人生 > >vue的圖片路徑,和背景圖片路徑打包後錯誤解決

vue的圖片路徑,和背景圖片路徑打包後錯誤解決

最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因為是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。

1、找到 config->index.js裡面,如下修改

2、找到 build->utils.js,在裡面加入一句publicPath:'../../',

配置修改完成,接下來,使用有兩種方式,這裡一般和檔案結構有關,下面是我的檔案結構下的使用

1、圖片資源放在 assets->img資料夾下面

img標籤引入圖片

<img src="../assets/img/loginback.png" class="test-img" />

 css使用圖片 

background: url('../assets/img/loginback.png') no-repeat top left ;

  2、圖片資源放在static->img資料夾下面

img標籤引入圖片

<img src="../../static/img/loginback.png" class="test-img" />
<img src="static/img/loginback.png" class="test-img" />

  css使用圖片

background: url('../../static/img/loginback.png') no-repeat top left ;

相關推薦

vue專案打包上線時的配置操作 vue圖片路徑背景圖片路徑打包錯誤解決

vue的圖片路徑,和背景圖片路徑打包後錯誤解決 2017-12-11 16:00 by muamaker, 7037 閱讀, 0 評論, 收藏, 編輯 最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vue

vue圖片路徑背景圖片路徑打包錯誤解決

最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因為是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。 1、找到 config->index.js裡面,如下修改 2、找到 build->utils.js

vue專案打包資源相對引用路徑背景圖片路徑問題

vue專案中若要使用相對路徑來獲得相應靜態資源, 在一般專案 build 之後都會生成一個 index.htm 檔案和 一個 static 資料夾,而 static 這個資料夾需要被放置在根目錄下, 1.需要找到config --- index.js(webpack 是依據index.js 來自動生成檔案

webpack打包vue專案後一些檔案圖片路徑找不到的問題解決辦法

最近寫了一個百度地圖的專案,要求底部有一個導航欄。具體如下圖: 首先,拿到了底部導航欄的所有圖示圖片,圖片都有兩種。灰色的代表未選中,選中的用帶樣色的圖片替換。 先看一下,元件中 html結構:通過vue提供的v-for方法,進行遍歷顯示footNav這個陣列。數

WPF調用圖片路徑或資源圖片

統一 content 調用 表達 ati 訪問 rop 例子程序 簡單 原文:WPF調用圖片路徑,或資源圖片一、加載本項目的圖片WPF引入了統一資源標識Uri(Unified Resource Identifier)來標識和訪問資源。其中較為常見的情況是用Uri加載圖像。U

C#載入圖片對同一圖片絕對路徑沒問題相對路徑報錯。

讀取圖片時的路徑無外乎有兩種:1:絕對路徑。2:相對路徑。開發過程中絕大多數情況應使用相對路徑。但在讀取圖片時,有時使用相對路徑會報錯,而使用絕對路徑則沒問題。 解決方案:前提是路徑設定正確,在VS中右鍵點選圖片的屬性<複製到輸出目錄>: 不復制------&g

WPF呼叫圖片路徑或資源圖片(WPF編譯器、執行期 引用資源)

http://www.cnblogs.com/sntetwt/p/5402098.html 一、載入本專案的圖片 WPF引入了統一資源標識Uri(Unified Resource Identifier)來標識和訪問資源。 其中較為常見的情況是用Uri載入影象。

CSS - 插入圖片img背景圖片

images order solid fff side 展示 PE add 圖標背景 1. img插入圖片,用的最多,比如產品展示類 .section img { width: 200px;/* 插入圖片更改大小 width 和 height */

Java 給PDF文件設定背景顏色背景圖片

如題,這篇文章主要介紹如何在Java應用程式中給PDF文件設定背景顏色和背景圖片。 使用元件: Spire.PDF for Java 下載Spire.PDF for JAVA包並解壓縮,然後從lib資料夾下匯入Spire.Pdf.jar包到Java應用程式中。 原PDF文件如下:

【html】使用img標籤背景圖片之間的區別

1.載入問題 背景圖片會等到html結構載入完成才開始載入 img標籤是網頁結構的一部分,會在html結構載入的時候載入 在網頁載入的過程中,背景圖片會等到結構載入完成(網頁的內容全部顯示以後)才開始載入,而img標籤 是網頁結構(內容)的一部分會在html結構載入的過程中載入,換句話講,網頁會先載入

【html】使用img標簽背景圖片之間的區別

tle smi 圖像 dia upload 查詢 ref 屏幕 文本 1.加載問題 背景圖片會等到html結構加載完成才開始加載 img標簽是網頁結構的一部分,會在html結構加載的時候加載 在網頁加載的過程中,背景圖片會等到結構加載完成(網頁的內容全部顯示以後)才開始加載

爬蟲:輸入網頁之後爬取當前頁面的圖片背景圖片,最後打包成exe

環境:py3.6 核心庫:selenium(考慮到通用性,js載入的網頁)、pyinstaller 顏色顯示:colors.py colors.py  用於在命令列輸出文字時,帶有顏色,可有可無。 # -*- coding:utf-8 -*-# # filename: prt_cmd_color.py

javaweb學習筆記 麵包屑模仿背景圖片拉滿平鋪

建立類似麵包屑路徑一樣的效果 下面是js程式碼 /****模仿麵包屑導航一級導航*****/ $(document).ready(function() { $(".title").click(function() { var con = $(this).ht

在移動端使用rem佈局使用背景圖片出現顯示不正確

原因: 因為圖片設定成背景後,移動端是響應式佈局,就會造成背景圖片無法正確顯示。因為背景圖片也被縮放了。 解決方法: 通過給背景圖片設定 background-size:

UniGUI的TUniLoginForm視窗自定義背景色背景圖片 UniGUI的TUniLoginForm視窗自定義背景色

雨田家園   UniGUI的TUniLoginForm視窗自定義背景色 uniGUI的TUniLoginForm類建立的登入視窗預設是不帶顏色,可以自定義css風格來改變背景顏色。 一般是通過在UniServerModule中,在C

UniGUI的TUniLoginForm窗口自定義背景色背景圖片

mss back tail css 圖片 www extjs 自定義 gin 雨田家園 UniGUI的TUniLoginForm窗口自定義背景色 uniGUI的TUniLoginForm類創建的登錄窗口默認是不帶顏色,可以自定義css風格來改變背景顏色。 一

Java ZXing 生成QRCode二維碼的兩種方式可設定圖片大小外白色邊框大小

QRGen在ZXing基礎上開發,這個庫使得利用Java生成QR碼變為小菜一碟。它需要依賴ZXing,所以生成圖案時你同時需要ZXing和QRGen的jar包。 QR 碼最常見的應用便是為網站中一個特定的網頁或下載頁帶來流量。因此,QR碼常常會編碼URL或網站地址,使用者可以通過手機攝像頭掃描,並在其瀏覽器中

java中如何對JFrame進行設定背景顏色背景圖片

/** * 給JFrame 新增一個背景圖案。 */ package com.swingpractise; import javax.swing.*; public class JFrameBackground4 extends JFrame { //建立一個JLayeredPane用於分層的。 JLaye

vue上傳圖片console.log()圖片資訊遇到的坑

用vue開發專案時,有個上傳專案的功能 <input @change="uploadImages($event)" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value="" />

【教程】Spire.Doc系列教程(1):給Word文件設定背景顏色背景圖片

使用Spire.Doc,開發人員可以非常方便地給Word文件設定背景顏色和新增背景圖片。以下示例將詳細講述如何使用Spire.Doc給一個現有Word文件設定純色背景顏色,漸變背景顏色以及新增背景圖片。 設定背景顏色 設定純色背景顏色 //建立Document例項 Document doc