How to change the background image in vue.js

How to change the background image in vue.js: introduce the style through inline style, use the [require()] method, the code is [<div :style ="leftBg"></div>] .

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

How to change the background image in vue.js:

In Vue project development, we often add background images to the page. However, when we add the background image to the style, compile and package it, and configure it on the server, the image is not correct due to path resolution problems. It is displayed with the following CSS style:

background:url("../../assets/left-bg.jpg");

At this time we will You should consider using other methods. Node provides a more effective way to solve this problem. The method is as follows:

is defined in data as follows:

  data() {
    return {
      leftBg: {
        background: "#235d8b url(" + require("./assets/left-bg.png") + ") no-repeat scroll 0 bottom",
      },
      topBg: {
        background: "#235d8b url(" + require("./assets/top-bg.png") + ") no-repeat scroll right 0",
        height: '80px'
      }
    }
  }

use require() Method, require() is a node.js method.

Introduce styles through inline styles:

<div :style ="leftBg"></div>

##Related free learning recommendations: JavaScript(Video)

The above is the detailed content of How to change the background image in vue.js. For more information, please follow other related articles on the PHP Chinese website!