vue cli 關于使用絕對路徑引用圖片的問題

Aldous 發(fā)布于2019-08-21 17:55 / 2024人閱讀

摘要：在頁面中使用絕對路徑可通過在中用引入樣式里面似乎無法使用絕對路徑，除非把圖片資源都放到里面，然后就可以這樣引用但，放到里面打包后只會把資源復制到發(fā)布目錄而不會把小圖片優(yōu)化為。

在頁面中使用絕對路徑可通過在js中用 require() 引入

data (){
    return {
        src: require("IMAGES/banner.jpg")
    }
}

樣式里面似乎無法使用絕對路徑，除非把圖片資源都放到static里面，然后就可以這樣引用

background: url("/static/images/banner.jpg") no-repeat;

但，放到static里面webpack打包后只會把資源復制到發(fā)布目錄而不會把小圖片優(yōu)化為base64。
為了兼顧可以把圖片資源優(yōu)化，所以還是不適合把圖片資源放到static，
但，在vue頁面style標簽里面寫樣式隨著目錄的深入有可能引用路徑是：

background: url("../../../images/banner.jpg") no-repeat;

有個做法似乎可以省去一些麻煩：
把樣式文件統一放到style文件夾里面，樣式圖片資源用相對路徑，然后在style標簽用src屬性引入樣式，這樣就可以避免太多層的返回了~~~

── src
    ── images
        ── banner.jpg
    ── style
        ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

GPU云服務器云服務器 js 使用絕對路徑 java圖片路徑問題 vue-cli vue-cli3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/90199.html

用vue開發(fā)一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

endiat 2019-08-22 18:23 評論0 收藏0
用vue開發(fā)一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

doodlewind 2019-07-25 14:21 評論0 收藏0
用vue開發(fā)一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

luoyibu 2019-08-02 10:48 評論0 收藏0
用vue開發(fā)一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續(xù)更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

snowLu 2019-08-30 15:54 評論0 收藏0
Vue.js中引入圖片路徑的幾種方式

摘要：記錄總結一下的中引入圖片路徑的幾種書寫方式中靜態(tài)資源的引入機制關于靜態(tài)資源的官方文檔靜態(tài)資源可以通過兩種方式進行處理在被導入或在中通過相對路徑以開頭被引用。如果是一個絕對路徑，例如，它將會被保留不變。 vue --version 3.6.3記錄總結一下的Vue中引入圖片路徑的幾種書寫方式 vue中靜態(tài)資源的引入機制 Vue.js關于靜態(tài)資源的官方文檔靜態(tài)資源可以通過兩種方式進行處理...

adam1q84 2019-08-23 18:09 評論0 收藏0