vue+element-ui如何为元素设置背景图片

在元素标签里，直接：

style="background-image:url('1.jpg')"//图片路径

是不能显示图片的。

也不能直接background...，就是说不通过style，没有相关的属性。

也有人在vue的项目中设置背景图片时遇到问题，最终的解决办法是：

//1.在data中定义如下：

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


//2.通过行内样式将样式引入

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

提出这个解决方案的人应该是成功了，但是我用就不行。

我就想给登录表格添加一个背景图片（还想在其他地方添加背景图片，一个个来。），我的登录相关的html代码如下：

<el-col :span="12">
        <div>
        <el-form :rules="rules"
                  class="login"
                  label-position="left"
                  label-width="0px"
                  v-loading="loading">
          ...
        </el-form>
      </div>
</el-col>

其中，el-form的class的值为login，所以我想干脆在这个里面加入背景设置，先看下login中的代码：

<style>
  .login {
    ...
  }
  
...

</style>

在其中加入：

background-image: url("../../assets/images/1.jpg");

是可以的：

另一种写法：

background: #fff url("../../assets/images/7.jpg");

也是可以的：

还有一个问题，就是好像下面还有一张，有种重叠了的感觉。应该是一张图不足以填满整个表格。

需要使用：

background-repeat: no-repeat;

使用webstorm时，上述代码下面会有灰色的波浪线，鼠标光标放到上面，就会自动提出对上面的代码进行优化的建议：

Optimize background properties ...

只要alt+shift+enter，就会自动优化：

background: #fff url("../../assets/images/7.jpg") no-repeat;

可以了，没有重叠了，但也能看出我用的图片要比这个表格小：

这个只要在login中添加：

background-size: cover;

即可：

其他的背景图片就可以按照上述方法加了，在style中为元素定义一个样式xx，然后class="xx"。