VUE v-bind动态绑定background背景图片不显示问题

我懒,所以没有绑定失败的例子。

v-bind绑定背景图片,该容器(例如div)必须要设有width和height!不然你试试

正确绑定背景图片方式如下,直接上代码:

<template>

  <div id="app">

    <div

      class="right-con"

      :style="{backgroundImage: 'url(' + imgUrl + ')', backgroundSize:'500px 500px', height:'500px', width:'500px'}"

    ></div>

  </div>

</template>

<script>

export default {

  name: "App",

  data() {

    return {

      imgUrl: require("./assets/123.jpg")

    };

  }

};

</script>

效果图:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。