vue前端项目，为什么这个image标签不显示图片，控制台也不报错

Question

求解为什么这种使用图片方式不好使，有什么办法吗，打印可以看到图片的请求路径，getImg感觉没效果

<template>
    <div>
        <div>
            <h1>{{ food.foodname }}</h1>
            {{ food.pic }}
            <image :src="getImg(food.pic)"/>
        </div>


        <div class="footer">
            <van-action-bar>
                <van-action-bar-icon icon="shop-o" text="首页" color="#ee0a24" to="/" />
                <van-action-bar-icon icon="cart-o" text="购物车" to="/card" />
                <van-action-bar-icon icon="star-o" text="收藏" color="#ff5000" />
                <van-action-bar-button type="warning" text="加入购物车" @click="onInsert" />
                <van-action-bar-button type="danger" text="立即购买" :to="{path: '/buy1', query: {foodId: food.food_id}}" />
            </van-action-bar>
        </div>
    </div>
</template>

<script setup>
    import { ref,onMounted } from 'vue';
    import { getFoodsDetailApi,insertCartApi } from '@/api';
    import { useRoute } from 'vue-router';
    import { useCounterStore } from '@/stores/counter';
    import { showSuccessToast, showFailToast } from 'vant';

    const route = useRoute();
    const store = useCounterStore();

    const food = ref({});

    const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
    const photo = ref()
  
    const getFoodDetail = async e => {
        const res = await getFoodsDetailApi(e);
        food.value = res;
    };

    const insertCart = async e => {
        const res = await insertCartApi(e);
        if(res.success === '0') {
            showFailToast('添加失败！');
        };
        if(res.success === '1') {
            showSuccessToast('添加成功！');
        };
    };

    const onInsert = () => {
        insertCart({
            userId: store.userId,
            foodId: food.value.food_id
        });
    };

    onMounted(() => {
        getFoodDetail(route.query.foodId);
        console.log(food.pic)
        
    });
</script>

<style scoped>

</style>

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的代码和问题描述，有几个可能的原因导致图片无法显示，让我们一一排查并给出解决方案：

1. 路径问题：确保图片的路径是正确的。你在getImg函数中构造的路径是否正确取决于你的服务器配置和图片的实际存储位置。如果路径不正确，图片将无法加载。你可以尝试直接在浏览器中访问这个路径，看看是否能正确加载图片。
2. 图片格式问题：确认你的服务器支持.webp格式的图片。如果服务器不支持这种格式，或者浏览器无法正确解析这种格式的图片，那么图片将无法显示。你可以尝试更改图片的格式，比如将其转换为.jpg或.png等常见格式。
3. Vue绑定问题：在<image :src="getImg(food.pic)"/>这一行中，你使用了Vue的绑定语法来设置图片的源地址。但是，由于Vue的响应式原理，直接传递函数可能不会得到预期的结果。你应该先计算图片的完整路径，然后将结果赋值给一个响应式的变量（比如你的photo变量），然后在<image>标签中使用这个变量。

下面是修改后的代码示例：

<template>
    <div>
        <div>
            <h1>{{ food.foodname }}</h1>
            <image :src="photo"/>
        </div>
        <!-- 其他代码不变 -->
    </div>
</template>

<script setup>
    // 其他代码不变
    const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
    const photo = ref(getImg(food.pic)); // 预先计算图片的完整路径并赋值给photo
    // 其他代码不变
</script>

这样修改后，当food.pic的值发生变化时，Vue将自动更新图片的源地址。如果问题仍然存在，你可能需要检查其他可能影响图片显示的因素，比如网络问题、服务器配置等。