Cómo usar la imagen img y la imagen de fondo en el proyecto Vue

 

cssmétodo

Simplemente use los backgroundatributos normalmente . Si hay algún problema, debe colocar el recurso de imagen en la staticcarpeta de recursos estáticos, no en assetsotras carpetas como esta.

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

importmétodo

Usar importimagen de fondo de importación

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

Usar estilo en línea

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

requiremétodo

Úselo para requireobtener imágenes

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

Asignado a imglasrc

<img :src="imgSrc" />