Vue ElementUI图片引入注意事项

最新推荐文章于 2024-09-19 21:38:15 发布

Trainer2107

最新推荐文章于 2024-09-19 21:38:15 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Trainer2107/article/details/133514104

本文介绍了如何在HTML中使用Vue组件`<el-image>`显示图片，并详细展示了如何在CSS中为登录容器定义全屏背景和样式，包括宽度、高度、定位和背景图片设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在div中引入

<div style="margin-top:3px;"><el-image

                      style="width: 200px; height: 150px;margin-top:10px;"

                      :src="require('../../assets/icon/企业认证.png')"

                    ></el-image></div>

2.在css中引入

.login-container {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  min-width: auto;

  z-index: 0;

  zoom: 1;

  background-color: #fff;

  background-repeat: no-repeat;

  background-size: cover;

  background-image: url(../../assets/opera/login_bg2.png);

  -webkit-background-size: cover;

  -o-background-size: cover;

  background-position: center 0;

}