使用vant将文字和图片放在同一个van-cell中显示

在Vant UI框架中，你可以轻松地在`van-cell`组件中同时展示文字和图片。`van-cell`是一个用于构建卡片式布局的基本单元，非常适合于列表展示。下面是如何在`van-cell`中添加文本和图片的示例：

<template>
  <van-cell v-for="item in items" :key="item.id">
    <div class="cell-content">
      <!-- 文字部分 -->
      <div class="text">{{ item.title }}</div>
      
      <!-- 图片部分 -->
      <van-image :src="item.image" @load="imageLoaded" :class="{ 'no-image': !item.image }"></van-image>
    </div>
  </van-cell>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '标题1', image: 'path/to/image1.jpg' },
        // 其他项目...
      ],
      // 图片加载完成后的回调函数
      imageLoaded: function (event) {
        console.log('Image loaded:', event);
      }
    };
  }
};
</script>

<style scoped>
.cell-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.text {
  margin-right: 10px;
}
.no-image {
  width: 0;
  height: 0;
  visibility: hidden; /* 或者使用 `opacity: 0` */
}
</style>

在这个例子中，我们遍历一个数组`items`，每个元素包含标题(title)和图片路径(image)。`van-image`会自动处理图片懒加载，如果图片未加载，`.no-image`样式会使图片区域不可见。记得替换`path/to/image1.jpg`为实际的图片URL。