vue 图片引入

电玩女神 2024-03-31 09:04 122阅读 0赞

#### vue 图片引入 ####

<template>
      <div>
        <img src="@/assets/img/logo.png">                                                                                                                
        <img src="https://cn.vuejs.org/images/logo.png">                                        
        <img :src="logoImg">                                                                    
        <img :src="logoImg1">                                                                   
        <img :src="logoImg2">                                                                   
    
        <div class="bgImgBox bgImg"/>                                                           
        <div class="bgImgBox bgImg1"/>                                                          
        <div class="bgImgBox" 
        :style="{'background-image': `url(${require('@/assets/img/cloud_log_blue_min.png')})`}"
        />                                                                                        
      </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'                                      // 外部链接
        }
      }
    }
    </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>