Set background image in Vue

Below I will share with you a method of setting background images in Vue projects. It has good reference value and I hope it will be helpful to everyone.

In the development of Vue projects, we often add background images to the page. However, after we add the background image to the style, compile and package it, and configure it on the server, due to path resolution problems, the image It cannot be displayed correctly, as shown in the following CSS style:

background:url("../../assets/head.jpg");

At this time we have to consider using other methods. Node provides a more effective way to solve this problem:

1. Define it in data as follows:

 export default {
 name: 'productdetailspage',
 data() {
  return {
   note: {
   backgroundImage: "url(" + require("../../assets/save.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "25px auto",
   marginTop: "5px",
   },
  }
 },

2. Introduce the style through inline style

<p class="note" :style ="note"></p>

This can perfectly solve this problem.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Demonstrate by implementing http request and loading in Vue2.0

How to learn the process and child_process modules in node (Detailed tutorial)

Method of cross-domain request through jQuery JSONP (Detailed tutorial)

The above is the detailed content of Set background image in Vue. For more information, please follow other related articles on the PHP Chinese website!