图片数据是从后台获取的，怎样实现点击小图上面出现大图？

  • Z时代
  • 2024-02-06
  • 分类：IT

如图：
图片数据是从后台获取的，怎样实现点击小图上面出现大图？
小图的图片是后台获取到的数据，怎样才能点击小图时将小图的路径赋值给大图，让它切换。

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="smallimg[0].img" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img)"
              >
                <img :src="item.img" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" class="left_img" />
              </li>
            </ul>
</div>

回答：

把大图引用图片的索引用变量currentIndex代替（而不是始终为0）：

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="smallimg[currentIndex].img" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img, index)"
              >
                <img :src="item.img" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" class="left_img" />
              </li>
            </ul>
</div>

然后script 这么写：

{
    data(){
        return {
            // ...
            currentIndex: 0
        }
    },
    methods: {
        getBigImg(img, index){
            // ...
            this.currentIndex = index;
        }
    }
}

不过看你的图片都是smallimg[].img，如果大小图的URL不一样的话需要增加一个大图专属的字段（而不是用.img）。

回答：

类似这样

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="bigImgSrc" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img)"
              >
                <img :src="item.img" alt="图片数据是从后台获取的，怎样实现点击小图上面出现大图？" class="left_img" @click="bigImgSrc = item.img "/>
              </li>
            </ul>
</div>

bigImgSrc的初始化的话，就是smallimg被赋值后，顺便把[0].img赋值给bigImgSrc

回答：

上诉描述的两种方案都是基于显示的是线上资源的情况下，如果楼主使用的是本地资源下的路径，应该要采取require的形式。

以上是 图片数据是从后台获取的，怎样实现点击小图上面出现大图？ 的全部内容， 来源链接： utcz.com/p/936226.html

回到顶部