vue 图片引入

用心去追梦

于 2022-11-19 23:35:38 发布

阅读量393

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33240556/article/details/127944035

版权

vue 专栏收录该内容

10 篇文章 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>