How to set background image in Vue project

In Vue project development, we often need to add background images to the page, but when we add background images to the style, compile and package, and configure them to the server, due to path resolution issues, the image cannot be displayed correctly, as shown in the following CSS style:

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

At this time, we need to consider using other methods. The node provides a more effective way to solve this problem:

1. Defined in data as follows:

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

2. Introduce styles through inline styles

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

This will perfectly solve this problem.

The method of setting background pictures in the above Vue project is all the content I share with you. I hope you can give you a reference and I hope you can support me more.