Vue.js计算属性访问异常：图片无法显示问题排查

问题场景 #

我在Vue组件中尝试通过API返回的数据设置图片src，相关代码如下：

const product = computed(() => {
    return store.products.find(product => product.slug === route.params.slug);
});

const selectedImage = ref(null);

function setMainImage(image) {
    selectedImage.value = image.original_url;
}

onMounted( () => {
    selectedImage.value = product.default_image;
});

Vue开发者工具已确认product计算属性存在有效数据：

product:Object (Computed)
    default_image:"http://localhost/storage/1/photo-1600210492493-0946911123ea.jpeg"
    description:"Lorem ipsum dolor sit ..."
    id:1

但组件内的图片标签 <img v-bind:src="selectedImage"> 始终无法显示图片。

补充：购物车Pinia Store代码片段：

import axios from "axios";
import { defineStore } from "pinia";
import { useStorage } from '@vueuse/core';

export const useCartStore = defineStore({
    id: 'cart',
    state: () => ({
        cart: useStorage('cart', { products: [], packages: [] }),
        order: {},
        customer: {},
        loading: true,
        error: null,
        categories: [],
        products: [],
        packages: [],
    }),
    actions: {
        async getProducts() {
            try {
                this.loading = true;

                const resProduct = await axios.get("/api/product");
                this.products = resProduct.data.data;

                const resPackage = await axios.get("/api/package");
                this.packages = resPackage.data.data;

                this.loading = false;
            } catch (error) {
                this.error = error;
            }
        },
...

可能原因及解决方法 #

• 计算属性访问错误
  product是computed返回的响应式对象，必须通过.value访问实际数据。原代码中onMounted里直接写product.default_image，拿到的是computed包装对象而非真实的product数据，导致selectedImage被设为undefined。

  修复代码：

  onMounted( () => {
      if (product.value) {
          selectedImage.value = product.value.default_image;
      }
  });
  

• 异步数据加载时机不匹配
  onMounted执行时，store.getProducts()的API请求可能还未完成，store.products是空数组，product计算属性返回undefined，此时赋值selectedImage会失败。即使后续API请求完成，onMounted不会重新执行，selectedImage不会自动更新。

  修复方案：监听product的变化，确保数据就绪后赋值：

  watch(product, (newProduct) => {
      if (newProduct) {
          selectedImage.value = newProduct.default_image;
      }
  }, { immediate: true });
  

• 图片URL本身不可访问
  直接复制DevTools中的图片URL到浏览器地址栏，检查是否能正常打开：

  • 若返回404，说明后端存储路径配置错误、文件不存在
  • 若出现跨域提示，需在后端配置CORS允许前端域名访问
  • 若本地服务器未正确映射/storage目录，需调整服务器静态资源配置

• 响应式更新异常
  从Store代码看，this.products = resProduct.data.data是符合Pinia响应式要求的赋值方式，此问题概率较低，但可检查getProducts是否在组件挂载前就已调用（比如在App.vue的onMounted中执行），确保组件渲染时products已有数据。

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