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

最新推荐文章于 2025-05-27 21:49:35 发布

心之所向_gp

最新推荐文章于 2025-05-27 21:49:35 发布

阅读量4.8k

点赞数 4

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_55182699/article/details/121570338

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue.js前端开发中，如何动态地为元素设置背景图片。通过结合使用`:style`指令和`require`，解决了动态配置背景图片路径未生效的问题，实现了成功设置背景图片的目标。

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

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

对于这样的情况我们就需要用动态绑定样式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%;
  border: 1px solid #434343;
}
</style>

发现是这样并没有生效：

那再用require包裹之后的呢

      imgArr:[
        {
          url:require('../assets/fan.jpeg')
        },
         {
          url:require('../assets/circle.jpeg')
        },
        {
          url:require('../assets/set.jpeg')
        }
      ]

成功设置了背景图片了: