Several ways to use img images and background background images in front-end vue-cli projects

Background pictures in the front end are extremely common, but they are prone to various problems.

One is the problem of resource reference methods of scaffolding itself, such as specifying static resource folders.

One is the method of introducing image resources. Sometimes using absolute or relative paths will lead to errors.

css method

Just use the background attribute normally.

If you have any problems, you should put the image resources into the static static resource folder, not other folders such as assets.

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

Import method

Import background image using import

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

Using inline styles

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

Require method

Use require to get pictures

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

src assigned to img

<img :src="bgImg" />

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.