图片在＜template＞、＜script＞、＜style＞中的使用方法

超好用的工具：支持在线生成vue文件！访问地址：https://www.ui2vue.cn

一、图片在<template>、<script>、<style>中的使用方法

配置别名（vue.config.js）

module.exports = {
     lintOnSave: true,
     baseUrl: './',
     productionSourceMap: true,
     chainWebpack: config => {
         config.resolve.alias
             .set('@', resolve('src'))
             .set('views', resolve('src/views'))
             .set('assets', resolve('src/assets'))
             .set('public', resolve('public'))
             .set('styles', resolve('src/styles'))
             .set('static', resolve('public/static'))
             .set('components', resolve('src/components'));
     },
     css: {
         loaderOptions: {
             sass: {
                 data: `@import "~@/styles/variables.scss";`
             }
         }
     }
 };

1、<template>

<template>
  <div>
    <!-- src/assets -->
    <img src="~@/assets/img/yzt/close2.png" alt="">
    <!-- public/static，static是别名-->
    <img src="~static/images/logo.png" alt="">
  </div>
</template>

2、<script>

<template>
  <img :src="url">
  <img :src=imgUrl1>
  <img :src=imgUrl2>
  <img :src=imgUrl3>
</template>
<script>
// 导入图片模块使用
import imgic from '../../assets/img/yzt/-img-ic_图片2.png'
export default {
  data () {
    return {
      // 引用assets文件夹下的图片，可以用别名
      url: require('@/assets/img/yzt/-img-ic_图片2.png')
      //引用public文件夹下的图片，这里的static不是别名
      imgUrl1: `static/images/logo.png`,
      imgUrl2: `./static/images/logo.png`,
      imgUrl3: `../../static/images/logo.png`,
    }
  }，
  methods: {
    addMarker() {
	  src: imgic,
	}
  }
}
</script>

超好用的工具：支持在线生成vue文件！访问地址：https://www.ui2vue.cn

注意：为什么不能public/static/images/logo.png引入呢？

可能是因为在执行npm run build后，新生成的dist文件内没有public文件夹，而是会把public文件夹下的所有文件或文件夹放到dist根目录下。此时就找不到public路径了，因为public文件夹下有static文件夹，所以可以使用static/xxx引用图片，

3、<style>

<style scoped>
// 引入外部css文件
@import "./css/index.less";
  .active {
	background: url("~@/assets/img/yzt/时间点2.png") no-repeat;
  }
  .active {
    // static是别名
    background: url("~static/images/logo.png");
  }
</style>

4、相对路径、绝对路径

• 相对路径导入的资源 URL 都会被解析为一个模块依赖。
• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
• 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
• 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：<img src="~some-npm-package/foo.png">
• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)

超好用的工具：支持在线生成vue文件！访问地址：https://www.ui2vue.cn

5、引入动态背景图

<template>
  <div>
    <div class="login" :style="{backgroundImg: url(loginImg)}"></div>
  </div>
</template>
 
<script>
  export default{
    data(){
      return {
        loginImg: require('./imgs/login.png')
      }
    }
  }
</script>
 
<style scoped lang="scss">
  .login{
    background-repeat: no-repeat; background-size:100%;
  }
</style>