美文网首页
VUE v-bind动态绑定background背景图片不显示问

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

作者: Wanlly | 来源:发表于2020-06-08 10:43 被阅读0次

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

    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>

    效果图:

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/lxhltktx.html