Vue3使用computed获取图片信息，模板渲染后值变为NaN求助

1. 图片加载异步，初始值未就绪：你用new Image()创建图片后立刻取naturalHeight和naturalWidth，但图片加载需要时间——此时这些属性还是初始值0，计算nAspect时就是0/0，自然得到NaN。
2. computed写法错误：你在computed函数里写了get: { ... }结构，这是错误的。computed函数本身就是getter，直接返回计算结果即可，不需要额外定义get属性。

图片加载是异步操作，computed是同步计算的，不适合处理这类场景。应该用ref存储尺寸数据，等图片加载完成后再更新数据：

<script setup>
import { ref, watch, onMounted } from 'vue';

const props = defineProps({
    image: String,
    numberOfImages: {
        type: Number,
        default: 0,
    },
});

// 存储图片尺寸的响应式数据
const imageDimensions = ref({
    nHeight: 0,
    nWidth: 0,
    nAspect: 0,
    nPortrait: false
});

// 加载图片并获取尺寸的函数
const getImageSize = () => {
    const img = new Image();
    img.src = image_path(props.image);
    img.onload = function() {
        const w = this.naturalWidth;
        const h = this.naturalHeight;
        // 图片加载完成后更新尺寸数据
        imageDimensions.value = {
            nHeight: h,
            nWidth: w,
            nAspect: w / h,
            nPortrait: w <= h
        };
    };
};

// 组件挂载时加载一次，图片地址变化时重新加载
onMounted(getImageSize);
watch(() => props.image, getImageSize);
</script>

<template>
    <div>
        <span v-if="imageDimensions.nPortrait">这是竖版图片<br /></span>
        <span v-else>这不是竖版图片<br /></span>

        <span>图片高度: {{ imageDimensions.nHeight }}</span>
        <img 
            class="w-full h-full object-fill object-center rounded-lg"
            :src="image_path(props.image)" 
            alt=""
        >
    </div>
</template>

• 用ref存储动态尺寸数据，图片加载完成后通过onload回调更新ref的值，Vue会自动响应数据变化更新模板，此时就能拿到正确的尺寸。
• 新增watch监听image属性，当父组件传入的图片地址改变时，会重新加载新图片的尺寸。
• 替换了错误的computed写法，改用异步加载后更新数据的逻辑，从根源解决初始值为0/NaN的问题。

内容的提问来源于stack exchange，提问作者Lloyd Loftus