Vue Cli 项目引入图片

1. vue-cli 2.x版本中conf/index文件中路径的含义

assetsRoot: path.resolve(__dirname, '../dist'),  
assetsSubDirectory: 'static',
assetsPublicPath: '/',

assetsRoot
资源根路径 项目打包后存放的路径 即项目目录下的dist文件
assetsSubDirectory
资源子目录 存放静态资源文件的static
assetsPublicPath
资源公共路径

打包之后的文件路径为 assetsPublicPath + assetsSubDirectory ：
/static/xxx

---

2.vue 项目引入图片

2.1 情况一：图片在/src/assets目录下

这时候图片会被webapck打包，我们需要将图片视为模块使用。

1. 图片地址直接写在html或者css里

图片地址直接写在html或者css里，使用相对路径或者模块路径引入资源，webpack会帮你处理这个图片最终的地址或者base64。

<template>
 <!-- 
相对路径  or 模块路径
 --> 
  <img src="../assets/logo.png" />
  <img src="~@/assets/logo.png" />
</template>

<template>
<div class="logo-container"></div>
<template>

<style lang="scss" scoped>
.logo-container {
    background-image: url('../../assets/logo.png');
    background-image: url('~@/assets/logo.png');
}
</style>

使用绝对路径不行。使用绝对路径的时候会直接被当成字符串。具体查看webpack关于路径处理的文档

2. 动态引入图片

当动态定义图片路径的时候，url-loader是无法探测到图片路径的。

（1）在data里面导入这张图片

 {
    logoImage: require('@/assets/logo.png')
 }

or

import logoImage from '@/assets/logo.png'
 {
    logoImage: logoImage
 }

上面require 或者 import 的作用就是将图片引入为模块，转换编译为打包后的资源。

（2）然后在template里面对需要background-image属性的标签绑定

<img :src="logoImage">
<div :style="{ backgroundImage: `url(${logoImage})` }"></div>

---

3.2 情况二：图片在/public目录下 或者 外部资源。

直接通过图片路径引入即可

<!-- 相对路径，在index.html的同级目录下查找此图片 -->
<img src="logo.png">
<!-- 绝对路径，/表示编译后的dist文件夹 -->
<img src="/logo.png">

<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>