解决v-for绑定图片问题

问题描述:后台返回一个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>

主要的代码就是

<img :src="require(`${item}`)">

发布了11 篇原创文章 · 获赞 6 · 访问量 5724

猜你喜欢

转载自blog.csdn.net/Ruipower/article/details/102703480