解决v-for绑定图片问题

最新推荐文章于 2022-06-08 23:11:29 发布

原创最新推荐文章于 2022-06-08 23:11:29 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

error 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在Vue项目中如何使用v-for循环遍历图片数组，并通过require方法动态加载图片资源，实现轮播效果。代码示例展示了如何在模板中正确引用图片路径。

问题描述：后台返回一个imgs的数组，里面是图片的url，通过v-for在前台轮播展示。

通过require（）方法实现。代码如下：

<template>
  <div>
    <slider>
      <slider-item slot='image' v-for="(item) in imgs">
        <!-- <img :src="require('${item}')" /> -->
        <img :src="require(`${item}`)">
      </slider-item>
    </slider>
  </div>
</template>

<script>
import Slider from 'common/slider/Slider.vue'
import SliderItem from 'common/slider/SliderItem.vue'
export default {
  name: '',
  data () {
    return {
      imgs:["./whr.jpg","./whr.jpg","./whr.jpg"]
    }
  },
  methods: {

  },
  components:{
    Slider,
    SliderItem
  }
}
</script>
<style scoped="scoped">

</style>

主要的代码就是