阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      vue-for 中设置元素 style 背景图片

      需求:需要动态设置某个 DOM 的背景图片;

      使用的 VUE2,在 v-for 的时候,一般都是

      <h3>{{item.title}}</h3>

      或者直接 : src=

      :src = item.target.cover_url
      

      这样的写法;

      但是遇到一个特殊场景,渲染出 background-image 这样的,就不能再用上面的方法了;

      直接上代码

      <router-link to="/?" class="feed-item" tag="a" v-for="(item,index) in recommend_feeds">
        <!-- 布局1 -->
        <div v-if="item.layout !== 5">
          <div class="feed-content">
            <div class="cover"
                 style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
                 :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
            >
              <div style="padding-top: 100%"></div>
            </div>
            <h3>{{item.title}}</h3>
            <p>{{item.target.desc}}</p>
          </div>
          <div class="author">
            <span class="name">by {{item.target.author.name}}</span>
          </div>
          <span class="feed-label">{{item.source_cn}}</span>
        </div>
      
        <!-- 布局5 -->
        <div v-else="item.layout === 5">
          <div class="feed-content">
            <div class="photos">
              <div class="main"
                   style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
                   :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
              >
                <div></div>
              </div>
              <div class="aside">
                <div class="aside-pic">
                  <div
                    style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
                    :style="{backgroundImage: 'url(' + item.target.more_pic_urls[0] + ')'}"
                  >
                    <div style="padding-top: 100%;"></div>
                  </div>
                </div>
                <div class="aside-pic">
                  <div
                    style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
                    :style="{backgroundImage: 'url(' + item.target.more_pic_urls[1] + ')'}"
                  >
                    <div style="padding-top: 100%;"></div>
                  </div>
                  <div class="more-pic">
                    <span class="count">
                      {{item.target.photos_count-3}}+
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <h3>{{item.title}}</h3>
          </div>
          <div class="author">
            <span class="name">by {{item.target.author.name}}</span>
          </div>
          <span class="feed-label">{{item.source_cn}}</span>
        </div>
      </router-link>
      

      核心代码是下面的这一段

      <div class="cover"
           style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
           :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
      >
        <div style="padding-top: 100%"></div>
      </div>
      

      这里是先设置了普通的 style;

      因为图片的地址是需要解析的;所以不能写在默认的 style 里;我们需要在 :style 里面(这里面的会动态加载并解析进去)

      需要用到的是 backgroundImage 这个驼峰写法,不要写错了(默认的属性 background-image 是不行的)

      目录
      本文目录
      目录