element ui背景图_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.通过行内样式将样式引入

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

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

...

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

在其中加入：

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"。