Vue设置背景图片

第一种：是用前端的静态图片做背景：

只需要在外层div中加入

 <div :style="conTop"> <div> 

这个style的内容写在data中

// Your script here
export default {
  data() {
    return {
      login: {
        backgroundImage: 'url(' + require('@/assets/img/background.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },

一定是要加require包裹路径

第二种:在style里

 
<style scoped>
.page-background {
  background-image: url('./'); /* 替换为你的图片路径 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  height: 100vh; /* 可以根据需要设置高度 */
  width: 100%; /* 可以根据需要设置宽度 */
}
</style>