vue 绑定背景图片、图片

花归去

于 2021-03-22 10:53:11 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vue 绑定背景图片

本文链接：https://blog.youkuaiyun.com/weixin_42120669/article/details/115067457

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Vue中通过`:style`属性设置背景图片，并使用import语句管理和引用图片资源，同时展示了数据绑定和动态图片加载的示例。

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

vue 绑定背景图片

最外面的div 样式为 background-repeat:no-repeat; 不填充

 <div class="login-container" :style="{backgroundImage:'url(' + backimg + ')'}">
  </div>

import backimgone from '@/assets/app19201080.png' //引用图片

  data() {
   
    return {
      backimg:backimgone,
   }
}

let imagePDF = require("../../../../static/img/fp.jpg");

                            <el-image
                                ref="imagetext"
                                id="imagetext"
                                :src="srcpdf"
                                style="width: 0px; height: 0px"
                                :preview-src-list="srcListSL"
                            >
                            </el-image>


let imagePDF = require("../../../../static/img/fp.jpg");


   data() {
        return {
            srcpdf: imagePDF,
            srcListSL: [],
               }
           })

 this.srcListSL.push(imagePDF);