location,userinfo

tj

2025-05-28 6ef1b14f735acdc3ff77a50da1bb09a5bb983dcc

 pages/home/community.vue

@@ -12,7 +12,15 @@
      <view class="inner-content">
        <!-- 内容图片 -->
        <image class="main-image" :src="image" mode="aspectFill" />
  
      <!-- <image class="main-image" :src="image" mode="aspectFit" /> -->
      <!-- <image class="main-image" :src="image" mode="scaleToFill" /> -->
      <!-- <view class="main-image-wrapper" :style="{ backgroundImage: `url(${image})` }"></view> -->
       <!-- 下面图片可以展示完全，但是拉伸变得模糊 -->
      <!-- <image :src="image" class="main-image" ></image> -->
      <!-- <up-image :show-loading="true" :src="image" width="100%" shape="square"></up-image> -->
       <!-- 动态计算高度：能够展示完全，高度会拉伸很高 -->
      <!-- <up-image v-if="imageHeight > 0" :src="image" width="100%" :height="imageHeight + 'px'" shape="square"
        :show-loading="true" /> -->
        <!-- 描述内容 -->
        <view class="description">
          {{ content }}
@@ -37,6 +45,9 @@
  </template>
  
  <script setup lang="ts">
import { ref, watch,onMounted } from 'vue'
import { onReady } from '@dcloudio/uni-app'

  interface Props {
    avatar?: string;
    nickname?: string;
@@ -48,6 +59,34 @@
  }
  
  const props = defineProps<Props>();
const imageHeight = ref(0)

const computeImageHeight = (src?: string) => {
  if (!src) return
  uni.getImageInfo({
    src,
    success: (res) => {
      const screenWidth = uni.getSystemSetting().windowWidth
      imageHeight.value = screenWidth * (res.height / res.width)
    },
    fail: () => {
      console.warn('获取图片信息失败')
    }
  })
}

watch(
  () => props.image,
  (newImage) => {
    if (!newImage) return
    computeImageHeight(newImage)
  },
  { immediate: true }
)

onReady(() => {
  computeImageHeight(props.image)
})
  </script>
  
  <style scoped lang="scss">
@@ -115,5 +154,15 @@
    font-size: 26rpx;
    color: #ccc;
  }
  </style>
  
.main-image-wrapper {
  width: 100%;
  width: 500px;
  height: 200px;
  /* 你可以根据需求自适应设置 */
  background-size: contain;
  /* 保证完整显示 */
  background-repeat: no-repeat;
  background-position: center;
}
</style>