フロントエンドvue-cliプロジェクトでは、imgピクチャとbackground背景図を使用するいくつかの方法があります。

フロントエンドの背景画像は非常によく使われていますが、様々な問題が発生しやすいです。
一つは足場自身の資源引用方式の問題で、例えば静的リソースフォルダを指定します。
一つは画像リソースの導入方式で、絶対または相対パスを使うとエラーが発生する場合があります。
cssの方法
正常にbackground属性を使えばいいです。
問題があれば、Sttic静的リソースフォルダに画像リソースを入れるべきです。クラスetsなどの他のフォルダではありません。

<div class="bgImg"></div>
<style>
.bgImg{
  background-image:url("@/../static/images/logo.png")
}
</style>

import方法
importを使って背景画像をインポートします。

import bgImg from "@/../static/images/logo.png"
export default {
  name: 'App',
  data () {
    return {
      bgImg: bgImg,
    }
  }
}

インラインスタイルを使う

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

require方法
requireを使って画像を取得します。

export default {
  name: 'App',
  data () {
    return {
      bgImg: require("@/../static/images/logo.png"),
    }
  }
}

賦課されたsrc

<img :src="bgImg" />

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。