Vue項目靜態(tài)文件之圖片的引用

Vue項目靜態(tài)文件之圖片的引用

一、前提

工程文件目錄

?|- mock
?|- node_modules
?|- public
?|- src
??|-- api
??|-- assets
??|-- components
??|-- router
??|-- store
??|-- style
????|-- test1.scss
????|-- test1_main.scss
??|-- utils
??|-- views
????|-- static_test
??????|-- test1.scss
??|-- App.vue
??|-- main.js

二、背景圖的引用

背景圖樣式直接寫在element的style屬性里

直接在html模板里胰挑，在dom對象的style里加背景圖满着，不起效果召廷，代碼如下：

<div style="height:100px; background:url('../../assets/img/bg.png') center top no-repeat">
 不起效果矿卑。柬焕。窝剖。
</div>

背景樣式class寫在vue文件的style標簽里

寫法：
background: url('圖片相對當前的路徑') center top no-repeat

<el-card class="box-card sudoku_item">
  <div slot="header" class="clearfix">
    <span>背景圖寫在css里</span>
  </div>
  <div class='testBackground'>
    起效果麻掸。。枯芬。
  </div>
</el-card>

<style lang="scss" scoped>
  .testBackground {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }
</style>

編譯后的css：

.testBackground[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

背景樣式class寫在樣式文件里论笔，在vue文件里引入樣式文件

樣式寫法：

background: url('圖片相對當前vue文件的路徑') center top no-repeat

這個圖片路徑很重要，url是圖片相對于當前vue文件的路徑千所，而不是圖片相對于樣式文件的路徑狂魔。

html寫法， /views/static_test/test1.vue:

  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景圖寫在style file里</span>
    </div>
    <div class='testBackground_file'>
      起效果淫痰。最楷。。
    </div>
  </el-card>

樣式寫法待错， /style/test1.scss：

  .testBackground_file {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }

/views/static_test/test1.vue籽孙，引入樣式文件寫法：

  <style lang="scss" scoped>
  @import "../../style/test1.scss";
  </style>

編譯后：

.testBackground_file[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

背景樣式class寫在樣式文件里，在main.js里引入樣式文件

html寫法火俄， /views/static_test/test1.vue:

  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景圖寫在style file里</span>
    </div>
    <div class='testBackground_file_main'>
      起效果犯建。。瓜客。
    </div>
  </el-card>

樣式寫法, /style/test1_main.scss：

  .testBackground_file_main {
    height: 100px;
    background: url('../assets/img/bg.png') center top no-repeat
  }

請注意适瓦，url是main.js相對于圖片文件的路徑竿开。

引入樣式文件方法，main.js：

// style
import './style/test1_main.scss'

引進來的樣式做為系統(tǒng)公共樣式玻熙。

編譯后：

.testBackground_file_main {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

三否彩、圖片的顯示

圖片引入直接寫在html里

html寫法：

 <img src='../../assets/img/dog.jpg'>

編譯后：

<img data-v-eb2b930e="" src="/img/dog.146655c9.jpg">

圖片url在js的data里定義

html寫法：

  <span><img :src='imgUrl'>直接寫url是不起效果的</span>
  <span><img :src='imgUrl_require'>需要用require</span>

js寫法：

  data () {
    return {
      imgUrl: '../../assets/img/up.jpg',
      imgUrl_require: require('../../assets/img/up.jpg')
    };
  },

直接定義路徑鏈接是不起效果的，需要在鏈接外面加上require嗦随。

編譯后：

<img data-v-eb2b930e="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAQDAwMDAwQDAwQFBAMEBQcFBAQFBwgGBgcGBggKCAgICAgICggKCgsKCggNDQ4ODQ0SEhISEhQUFBQUFBQUFBT/2wBDAQUFBQgHCA8KCg8SDwwPEhYVFRUVFhYUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgABwDAREAAhEBAxEB/8QAGwAAAQQDAAAAAAAAAAAAAAAACAADBgcBAgX/xAApEAABAwMDAwMFAQAAAAAAAAABAgMFAAQGERIhBxMxCEFhIiMyQnGR/8QAGgEAAgMBAQAAAAAAAAAAAAAAAQQABQYCA//EAB8RAAIDAAIDAQEAAAAAAAAAAAABAgMRBAUSITETYf/aAAwDAQACEQMRAD8APvXioQqPqL19xrApNmJ7IkrtSgLgId2dpJ99QhzWkLuwhXLCr5Pawol4/Sw8YyeJyyJYl4d5L1s+kK0B5Tr7EeRTVdiktQ9TdG2Oo7Wtep7YUd6geq8hgtkiDhG3BLyDAWi5Gv20rK0gpI/bVuq7nchx9IqO05UqliA7yWAyO1et5DIAtN1KK3IL3Czv5Cuf7WetrlusytsJv3L6yf4NlWadF5qzF2lxcJJaLUxz2nEk7d6fGpHtTnGsnS1vxjvGus40l/Q5YSTRNQ0fMMpUhq/tWrpCFfkEvICwD8jdWjUtRsK5bHRqXxqDnHGXZWxYunGDq2p1CVkeeOQeOaFlMZnM6IWe2Cj6pbItZXDFpsJttzaG9vHgJGnxVNz6n5LDO9vB/pHxQRWL4vDS+IwgmbBi5fYZSUF1CVlP1a8Eg8VZU0xlBaXVFMJVrSbNMtW7TbDKQ2y2kIbQngBKeAAKbSwdWR9DtQJqUA+R/tBpMDWi0NEJnbUOfE//2Q==">

圖片url由js動態(tài)設置

html寫法：

  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>圖片url由js動態(tài)設置</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="setImageUrl1">down</el-button>
      <el-button style="float: right; padding: 3px 0" type="text" @click="setImageUrl2">up</el-button>
    </div>
    <div class='testBackground_file'>
      <img :src='imgUrl2'>
    </div>
  </el-card>

js寫法：

  data () {
    return {
      imgUrl2: require('../../assets/img/up.jpg')
    };
  },
  methods: {
    setImageUrl1 () {
      this.imgUrl2 = require('../../assets/img/down.jpg')
    },
    setImageUrl2 () {
      this.imgUrl2 = require('../../assets/img/up.jpg')
    }
  }

在js定義的路徑都需要加上require列荔。

編譯后：

<img data-v-eb2b930e="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAQDAwMDAwQDAwQFBAMEBQcFBAQFBwgGBgcGBggKCAgICAgICggKCgsKCggNDQ4ODQ0SEhISEhQUFBQUFBQUFBT/2wBDAQUFBQgHCA8KCg8SDwwPEhYVFRUVFhYUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAfAB4DAREAAhEBAxEB/8QAGwAAAQQDAAAAAAAAAAAAAAAACAEFBgcAAgP/xAArEAABAwQBAgMJAQAAAAAAAAABAgMRAAQFBgcSQRMhMxUiIzE1QmGBgpH/xAAbAQACAgMBAAAAAAAAAAAAAAAABQMEAgYHAf/EACURAAEDAwMDBQAAAAAAAAAAAAEAAwQCERIFBhMhMTIiQVFScf/aAAwDAQACEQMRAD8APuf8oQq55d3vLaNh0XuHQwu5WoD46StMT+FJqpMfLVNwtl23o7eoO4uXH4nPjPbL7cNaYyuSbaRdrA8TwgUokifIEqrOM7yUXVTXdNohSMKOymYqwEluq95gvdqx+sm71b1W1FVyQJUG+n7R386qy6qhT0WwbbajOSMXvdDntfJl1tmrt4rMA+1bdQClxHVCqTOyc6MSuoaZoNMORyNeBXfDcpZXDaxa61rYUMgrpC3QJM/LpAjvWTcoijGlRTdvNuyC+94onuP3s8/rVq7sf1FY6v4IETTtonEE91yjWKGRIIa8QpO40h1BbcSFIUIKamNillJxNwh35X4RceeVmtTt5WtUvWbae57gAUolwvquk7c3aKBxSD0+U98R8NM4RtvN7CyF5M+8yy4PT/RgzUsSEKBc91Q3JugyDxNH0K70p6RApitEJuto869QkihCyKEJaEL/2Q==">

四、打包后生成的圖片路徑分析

打包后生成的文件目錄

??不管發(fā)布到根目錄枚尼，還是發(fā)布到子目錄贴浙，打包后生成的文件層次結構是一樣的，如下：

?|- dist
??|-- css
??|-- fonts
??|-- img
??|-- js
??|-- favicon.ico
??|-- index.html

打包后引用圖片的路徑

??編譯后所有非require引入的圖片都被編譯到/dist/img/目錄下面姑原，并且重命名悬而，引用路徑亦已改變，路徑隨圖片文件位置和引用圖片的文件的位置而調整了锭汛。
??而require引入的圖片則生成了圖片base64編碼笨奠，圖片路徑就是圖片base64編碼。

1唤殴、背景圖路徑
???編譯打包后生成的背景圖路徑格式為:?../img/##.png般婆，
???編譯打包后所有的樣式代碼在css目錄的文件中，引用圖片的文件是樣式文件朵逝，引用圖片的路徑是樣式文件相對于圖片位置的路徑蔚袍，所以由'../img'開頭。

2配名、圖片路徑
???編譯后的<img>引用路徑格式是:?/img/##.png啤咽，和背景圖的引用路徑不一樣。
???引用圖片的文件是html渠脉，html文件在根目錄宇整，所以引用路徑由'/img'開頭。

3芋膘、圖片base64編碼
???使用require引入的圖片鳞青，經編譯后直接生成了圖片base64編碼。

打包后生成的index.html文件

發(fā)布到根目錄的情況

.env.production为朋，環(huán)境變量配置

VUE_APP_CURRENTMODE = 'production'
outputDir = 'dist'

vue.config.js配置

outputDir: process.env.outputDir,
assetsDir: '',
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',

生成的index.html

<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>vue-simple</title>
    <link rel=stylesheet href=https://unpkg.com/leaflet@1.3.1/dist/leaflet.css>
    <script src=https://unpkg.com/leaflet@1.3.1/dist/leaflet.js></script>
    <link href=/css/chunk-1f9b94c5.d8e73c38.css rel=prefetch>
    <link href=/css/chunk-3c9c611f.7ff185d6.css rel=prefetch>
    <link href=/css/chunk-56343cd2.d37b5fd0.css rel=prefetch>
    <link href=/js/chunk-1f9b94c5.96c7cd36.js rel=prefetch>
    <link href=/js/chunk-3c9c611f.3070ee4d.js rel=prefetch>
    <link href=/js/chunk-56343cd2.722cd6e6.js rel=prefetch>
    <link href=/css/app.9e145aa4.css rel=preload as=style>
    <link href=/css/chunk-vendors.c5637d35.css rel=preload as=style>
    <link href=/js/app.d24b3ba9.js rel=preload as=script>
    <link href=/js/chunk-vendors.9e634535.js rel=preload as=script>
    <link href=/css/chunk-vendors.c5637d35.css rel=stylesheet>
    <link href=/css/app.9e145aa4.css rel=stylesheet>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-simple doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.9e634535.js></script>
    <script src=/js/app.d24b3ba9.js></script>
  </body>
</html>
發(fā)布到子目錄的情況

.env.production臂拓，環(huán)境變量配置

VUE_APP_CURRENTMODE = 'production'
outputDir = 'dist'

vue.config.js配置

outputDir: process.env.outputDir,
assetsDir: '',
publicPath: process.env.NODE_ENV === 'production' ? '/vue-demo' : '/',

生成的index.html

<!DOCTYPE html><html lang=en>
  <head><meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/vue-demo/favicon.ico>
    <title>vue-simple</title>
    <link rel=stylesheet href=https://unpkg.com/leaflet@1.3.1/dist/leaflet.css>
    <script src=https://unpkg.com/leaflet@1.3.1/dist/leaflet.js></script>
    <link href=/vue-demo/css/chunk-1f9b94c5.d8e73c38.css rel=prefetch>
    <link href=/vue-demo/css/chunk-3c9c611f.7ff185d6.css rel=prefetch>
    <link href=/vue-demo/css/chunk-56343cd2.d37b5fd0.css rel=prefetch>
    <link href=/vue-demo/js/chunk-1f9b94c5.96c7cd36.js rel=prefetch>
    <link href=/vue-demo/js/chunk-3c9c611f.3070ee4d.js rel=prefetch>
    <link href=/vue-demo/js/chunk-56343cd2.722cd6e6.js rel=prefetch>
    <link href=/vue-demo/css/app.9e145aa4.css rel=preload as=style>
    <link href=/vue-demo/css/chunk-vendors.c5637d35.css rel=preload as=style>
    <link href=/vue-demo/js/app.1da8b7e5.js rel=preload as=script>
    <link href=/vue-demo/js/chunk-vendors.9e634535.js rel=preload as=script>
    <link href=/vue-demo/css/chunk-vendors.c5637d35.css rel=stylesheet>
    <link href=/vue-demo/css/app.9e145aa4.css rel=stylesheet>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-simple doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id=app></div>
    <script src=/vue-demo/js/chunk-vendors.9e634535.js></script>
    <script src=/vue-demo/js/app.1da8b7e5.js></script>
  </body>  
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市习寸，隨后出現(xiàn)的幾起案子胶惰，更是在濱河造成了極大的恐慌，老刑警劉巖霞溪，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件童番，死亡現(xiàn)場離奇詭異精钮，居然都是意外死亡，警方通過查閱死者的電腦和手機剃斧，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來忽你，“玉大人幼东，你說我怎么就攤上這事】砌ǎ” “怎么了根蟹？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長糟秘。 經常有香客問我简逮，道長，這世上最難降的妖魔是什么尿赚？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任散庶，我火速辦了婚禮，結果婚禮上凌净，老公的妹妹穿的比我還像新娘悲龟。我一直安慰自己，他們只是感情好冰寻，可當我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布须教。 她就那樣靜靜地躺著，像睡著了一般斩芭。 火紅的嫁衣襯著肌膚如雪轻腺。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天划乖，我揣著相機與錄音贬养，去河邊找鬼。 笑死迁筛，一個胖子當著我的面吹牛煤蚌，可吹牛的內容都是我干的。 我是一名探鬼主播细卧，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼尉桩，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了贪庙？” 一聲冷哼從身側響起蜘犁，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎止邮，沒想到半個月后这橙，有當地人在樹林里發(fā)現(xiàn)了一具尸體奏窑，經...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年屈扎，在試婚紗的時候發(fā)現(xiàn)自己被綠了埃唯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡鹰晨，死狀恐怖墨叛，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情模蜡，我是刑警寧澤漠趁，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站忍疾，受9級特大地震影響闯传，放射性物質發(fā)生泄漏。R本人自食惡果不足惜卤妒，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一甥绿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧荚孵，春花似錦妹窖、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案骄呼，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至判没，卻和暖如春蜓萄，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背澄峰。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工嫉沽， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人俏竞。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓绸硕，卻偏偏與公主長得像，于是被迫代替她去往敵國和親魂毁。 傳聞我的和親對象是個殘疾皇子玻佩，可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2贊 345