VUEにおけるピクチャおよびバックグラウンドマップ参照(imgおよびbackground-image)

VUEにおけるピクチャおよびバックグラウンドマップ参照(imgおよびbackground-image)
一、背景図導入
1.第1の方式

<div class="bgimg">div>

.bgimg{
    width: 150px;
    height: 60px;
    /*           */
    /*background-image: url('../../../../assets/images/logo.png');*/
    background-image: url('~@/assets/images/logo.png');
    background-size: cover
  }

2.第2の方式

<div :style="{backgroundImage: 'url(' + require('@/assets/images/logo.png') + ')' }">div>

3.第三の方式

<div :style="{backgroundImage: 'url(' + imgData + ')' }">div>

<script>
import logo from '@/assets/images/logo.png'
export default {
  data() {
    return {
      imgData: logo 
    }
  }
}
</script>

もんだいぶんせき

	<div style="background-image: url('../../../../assets/images/logo.png');">div>
  
    <div style="background-image: url('static/logo.png');">div>

二、img導入画像

 	
    <img src="~@/assets/images/logo.png" alt="">
    <img src="../../../../assets/images/logo.png" alt="">
    
    <img :src="imgData" alt="">
    
    <img :src="require('../../../../assets/images/logo.png')" alt="">