Vueプロジェクトでimg画像と背景画像を使用する方法

 

css方法

通常どおりbackground属性を使用します。問題がある場合は、このような他のフォルダーstaticではなく、静的リソースフォルダーに画像リソースを配置する必要がありassetsます。

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

import方法

importインポート背景画像を使用

import imgSrc from "@/../static/images/bg.png"
export default {
    data () {
        return {
            imgSrc: imgSrc,
        }
    }
}

インラインスタイルを使用する

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

require方法

require写真を取得するために使用します

export default {
    data () {
        return {
            imgSrc: require("@/../static/images/bg.png"),
        }
    }
}

に割り当てられimgたsrc

<img :src="imgSrc" />