一切福田，不離方寸，從心而覓，感無不通。

Vue项目静态文件之图片的引用

一、前提

工程文件目录

|- 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里加背景图，不起效果，代码如下：

1
2
3
<div style="height:100px; background:url('../../assets/img/bg.png') center top no-repeat">
不起效果。。。
</div>

 

背景样式class写在vue文件的style标签里

写法：
background: url('图片相对当前的路径') center top no-repeat

1
2
3
4
5
6
7
8
<el-card class="box-card sudoku_item">
  <div slot="header" class="clearfix">
    <span>背景图写在css里</span>
  </div>
  <div class='testBackground'>
    起效果。。。
  </div>
</el-card>

 

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

 

编译后的css：

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

 

背景样式class写在样式文件里，在vue文件里引入样式文件

样式写法：

1
background: url('图片相对当前vue文件的路径') center top no-repeat

 

这个图片路径很重要，url是图片相对于当前vue文件的路径，而不是图片相对于样式文件的路径。

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

1
2
3
4
5
6
7
8
  <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：

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

 

/views/static_test/test1.vue，引入样式文件写法：

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

 

编译后：

1
2
3
4
.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:

1
2
3
4
5
6
7
8
  <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：

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

 

请注意，url是main.js相对于图片文件的路径。

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

1
2
// style
import './style/test1_main.scss'

 

引进来的样式做为系统公共样式。

编译后：

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

 

三、图片的显示

图片引入直接写在html里

html写法：

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

 

编译后：

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

 

图片url在js的data里定义

html写法：

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

 

js写法：

1
2
3
4
5
6
  data () {
    return {
      imgUrl: '../../assets/img/up.jpg',
      imgUrl_require: require('../../assets/img/up.jpg')
    };
  },

 

直接定义路径链接是不起效果的，需要在链接外面加上require。

编译后：

1
<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动态设置

html写法：

1
2
3
4
5
6
7
8
9
10
  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>图片url由js动态设置</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写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
  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。

编译后：

1
<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==">

四、打包后生成的图片路径分析

打包后生成的文件目录

不管发布到根目录，还是发布到子目录，打包后生成的文件层次结构是一样的，如下：

|- 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文件

发布到根目录的情况

.env.production，环境变量配置

1
2
VUE_APP_CURRENTMODE = 'production'
outputDir = 'dist'

 

vue.config.js配置

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

 

生成的index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

 

发布到子目录的情况

.env.production，环境变量配置

1
2
VUE_APP_CURRENTMODE = 'production'
outputDir = 'dist'

 

vue.config.js配置

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

 

生成的index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>

 

作者：Anqi2018
链接：https://www.jianshu.com/p/95cf12319fd6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Copyright © 2024 Longsheng All rights reserved.