vue循环本地不同图片渲染功能

最新推荐文章于 2024-08-07 15:01:52 发布

卫盼1

最新推荐文章于 2024-08-07 15:01:52 发布

阅读量822

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Yourlittlecutie/article/details/136682019

版权

以下代码为背景图片渲染

<ul class="contentImg_box">
  <li v-for="(item, index) in dataList" :key="index"  :style="getbackgroundImg(item.backgroundImg)"@click="clickUrl(item.url)">
      <span>{{ item.text }}</span>
  </li>
</ul>

methods: {
    getbackgroundImg (imageUrl) {
      return {
        'background-image': `url(${imageUrl})`,
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
      };
    },
}

如果渲染本地图片必须添加require();否则本地图片不显示，(数据里边添加require()则html省略该方法如下图)

<ul class="contentImg_box">
      <!-- :style="getbackgroundImg(item.backgroundImg)" -->
      <li v-for="(item, index) in dataList" :key="index" @click="clickUrl(item.url)">
        <img :src="require('../assets/imges/transProvincial/' + item.backgroundImg)" alt="">
        <span>{{ item.text }}</span>
      </li>
    </ul>

data () {
    return {
      dataList: [
        {
          text: 'xxx',
          url: 'xxxxxxxxxxxxxxx',
          backgroundImg: require('../assets/imges/transProvincial/xxxx.png'),
        },
        {
          text: 'xxx',
          url: 'xxx',
          backgroundImg: require('../assets/imges/transProvincial/xxx.png'),
        },
        {
          text: 'xxx',
          url: 'xxx',
          backgroundImg: require('../assets/imges/transProvincial/xxx.png'),
        },
        {
          text: 'xxxx',
          url: 'xxx',
          backgroundImg: require('../assets/imges/transProvincial/xxx.png'),
        },
        {
          text: 'xxxx',
          url: 'xxx',
          backgroundImg: require('../assets/imges/transProvincial/xxx.png'),
        },
        {
          text: 'xxxx',
          url: 'xxx',
          backgroundImg: require('../assets/imges/transProvincial/xxx.png'),
        }
      ]
    };

效果图（背景图片渲染）