VUE 动态绑定背景图片（:style）需要用require包裹

最新推荐文章于 2024-03-07 14:37:27 发布

VIP文章心之所向_gp

最新推荐文章于 2024-03-07 14:37:27 发布

阅读量4.4k

点赞数 4

分类专栏： VUE 文章标签： javascript 前端 css3 vue.js

本文链接：https://blog.csdn.net/weixin_55182699/article/details/121570338

版权

我们前端开发过程中给元素设置背景图片是我们很常规的操作，但是我们也会遇到一些场景需要我们动态的配置背景图片的路径。

对于这样的情况我们就需要用动态绑定样式style，具体的内容如下：

Class 与 Style 绑定 — Vue.js

我们按照文档的编写的代码（没有用require包裹）：

<template>
  <div>
    <div class="img" v-for="item in imgArr" :key="item" :style="{'backgroundImage': 'url(' + item.url + ')'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgArr:[
        {
          url:'../assets/fan.jpeg'
        },
         {
          url:'../assets/circle.jpeg'
        }
      ]
    };
  },
};
</script>
<style scoped>
.img{
  width: 250px;
  height: 250px;
  margin-left: 20px;
  float: left;
  background-size: 100% 100