vue引入图片的三种方式与背景图引入

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <img :src="imgSrc1" alt="">
    <img :src="imgSrc2" alt="">

    <section :style="{backgroundImage: 'url('+imgSrc2+')'}"></section>
    <section :style="{backgroundImage: 'url('+imgSrc1+')'}"></section>
  </div>
</template>

<script>
import imgSrc from './assets/logo.png'
  export default {
    name:'App',
    data() {
      return {
        imgSrc1: require('../src/assets/logo.png'),
        imgSrc2:imgSrc
      }
    },
  }
</script>

<style lang="scss" scoped>
  section{
    width: 200px;
    height: 200px;
    background-color: gray;
  }
</style>

vue引入图片的三种方式与背景图引入_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)