vue 图片引入

 

vue 图片引入、vue 背景图片引入、vue 图片路径动态拼接、vue require引入图片、vue import引入图片

 

<template>
  <div>
    <img src="@/assets/img/logo.png">                                                       <!-- 直接写入项目路径 -->                                                         
    <img src="https://cn.vuejs.org/images/logo.png">                                        <!-- 直接写入外部路径 -->
    <img :src="logoImg">                                                                    <!-- import 引入data赋值 -->
    <img :src="logoImg1">                                                                   <!-- require 引入data赋值 -->
    <img :src="logoImg2">                                                                   <!-- 外部链接 data赋值 -->
    <img :src="`${require('@/assets/img/' + logoImgName)}`">                                <!-- 拼接引入 -->
    
    
    <div class="bgImgBox bgImg"/>                                                           <!-- css 设置背景图（~@） -->
    <div class="bgImgBox bgImg1"/>                                                          <!-- css 设置背景图（相对路径引） -->
    <div class="bgImgBox" 
    :style="{'background-image': `url(${require('@/assets/img/cloud_log_blue_min.png')})`}"
    />                                                                                      <!-- require 设置行间背景图 -->
    <div class="bgImgBox" 
    :style="{'background-image': `url(${require('@/assets/img/' + logoImgName)})`}"
    />                                                                                      <!-- require 设置行间背景图动态拼接 -->  

  </div>
</template>
<script>
import logo from '@/assets/img/logo.png'
export default {
  data() {
    return {
      logoImg: logo,                                                                        // import 引入      
      logoImg1: require('@/assets/img/logo.png'),                                           // require 引入
      logoImg2: 'https://cn.vuejs.org/images/logo.png',                                     // 外部链接
      logoImgName: 'logo.png'                                                               // 拼接引入
    }
  }
}
</script>
<style>
.bgImgBox { 
  width: 32px;
  height: 32px;
  display: inline-block; 
}
.bgImg {                                                                                     
  background-image: url(~@/assets/img/cloud_log_blue_min.png);                              /* ~@ 引入背景图 */
}
.bgImg1 {                                                                                    
  background-image: url(../../../assets/img/cloud_log_blue_min.png);                        /* 相对路径引入背景图 */
}
</style>