<template>
  <div class="image-container">
    <img 
      :src="imageUrl" 
      alt="示例图片" 
      class="responsive-img"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 初始化图片 URL
    };
  },
  mounted() {
    // 从路径中获取 URL 参数并设置到 imageUrl
    const urlParams = new URLSearchParams(window.location.search);
    this.imageUrl = urlParams.get('url') || 'http://yunque-pro.oss-cn-hangzhou.aliyuncs.com/product/resource/images/CEF6FE85-08DE-4F1C-9B40-914649726FD2.png';
  }
};
</script>

<style scoped>
.image-container {
  width: 100%; /* 容器宽度占满父级 */
}

.responsive-img {
  width: 100%; /* 图片宽度自适应 */
  height: auto; /* 保持图片比例 */
  display: block; /* 去除图片底部空隙 */
}
</style>