使用vant的轮播图结果使图片竖排

使用vant的轮播图结果使图片竖排，设置了vant轮播图的样式也没用

<template>
  <view class="content">
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in state.images" :key="image">
          <img :src="image.imageUrl" />
        </van-swipe-item>
      </van-swipe>

    </div>
  </view>
</template>
  
<script setup lang="ts">
import { reactive, onMounted } from "vue"
import { getbanner } from "../api/serve";
const state = reactive({
  images: []
})
onMounted(async () => {
  let res = await getbanner()
  state.images = res.data.banners
})



</script>
  
<style lang="less">
.content {
  width: 100%;


  .banner {
    width: 100%;
    height: 64vw;
    background-color: red;

    van-swipe {
      width: 100%;
      height: 64vw;

      van-swipe-item {
        width: 100%;
        height: 64vw;

        img {
          width: 100%;
          height: 64vw;
        }
      }
    }
  }

}
</style>
  

该回答引用于ChatGPT：
根据提供的代码，轮播图出现竖向显示的原因可能是因为容器的高度设置不正确，导致图片按照容器的高度进行显示。解决方法可以从以下几个方面入手：

检查容器的高度设置：可以检查容器的高度设置是否正确，确保容器的高度与图片的宽高比一致，以保证图片按照正确的比例进行显示。

检查图片的宽高比：可以检查图片的宽高比是否正确，以确保图片按照正确的比例进行显示。

检查样式设置：可以检查样式设置是否正确，比如是否设置了旋转或者翻转等样式，以确保样式不会影响图片的显示。

检查组件的使用：可以检查组件的使用是否正确，比如是否正确引入了组件、是否正确传递了参数等，以确保组件能够正常工作。

需要注意的是，以上方法仅供参考，具体解决方法需要根据具体情况进行调整。同时，也需要注意代码的合法性和可维护性，以确保代码的质量和可靠性。

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7780541
• 这篇博客也不错, 你可以看下使用vant组件库修改vant自定义样式
• 除此之外, 这篇博客: vant组件的引入方式中的 vant组件的引入方式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  这里接着上一篇（vue cli3脚手架创建vant项目环境）

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^