vue 图片引入-蒲公英云

vue 图片引入

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

vue 图片引入

<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赋值 -->
    <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>
</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>